首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS:10分钟搞定Flex布局

CSS:10分钟搞定Flex布局

作者头像
WEBJ2EE
发布2019-07-19 11:36:06
3930
发布2019-07-19 11:36:06
举报
文章被收录于专栏:WebJ2EEWebJ2EE

Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

);

1. 浏览器支持情况?

参考: https://caniuse.com/#search=Flex

2. 核心概念

flex-container: flex容器,即设置 display:flex 或 display:inline-flex 样式的元素; flex-item: flex元素,即 flex-container 中的子元素; main-axis: 主轴,方向受flex-direction样式控制,默认方向从左到右; cross-axis: 交叉轴,方向受flex-direction样式影响,默认方向从上到下;

3. flex-container相关样式

启用flex布局

display: flex | inline-flex;

flex-direction:主轴方向控制;

flex-direction: row | row-reverse | column | column-reverse; 默认值:row;

justify-content:flex-item在主轴方向上的对齐方式;

justify-content: flex-start | flex-end | center | space-between | space-around;

默认值:flex-start

align-items:flex-item在交叉轴方向上的对齐方式;

align-items: flex-start | flex-end |center | baseline | stretch;

默认值: stretch

flex-wrap:是否允许flex-item在flex-container中多行展示;

flex-wrap: nowrap | wrap | wrap-reverse; 默认值:nowrap

align-content: flex-container中存在多行flex-item时,这些行在交叉轴方向上的对齐方式;

align-content: flex-start | flex-end | center | space-between |space-around | stretch; 默认值:stretch;

flex-flow:是flex-direction和flex-wrap的简写形式;

flex-flow: <flex-direction> || <flex-wrap>;

4. flex-item相关样式

order:定义flex-item的排列顺序;数值越小,排列越靠前。

order: <integer>; 默认值:0;

flex-grow:若存在剩余空间,flex-item的“放大比例”;

flex-grow: <number>; 默认值:0;(不放大)

flex-shrink:若空间不足,flex-item的“缩小比例”;

flex-shrink: <number>; 默认值:1;

flex-basis: 定义 flex-item 在主轴方向上占据空间大小的初值;

flex-basis:<length> | auto; 默认值:auto(即元素本来的大小)

flex:是flex-grow、flex-shrink、flex-basis属性的缩写形式;

flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 注:几种常见缩写形式; flex: auto; === flex: 1 1 auto; flex: none; === flex: 0 0 auto; flex: initial; === flex: 0 1 auto; flex: <number>; === flex: <number>1 auto; flex: 1; === flex: 1 1 auto;

5. Flex布局案例

5.1. 垂直居中;

5.2. fixed-dynamic;

5.3. fixed-dynamic-complex

关于Flex布局更详细的内容....

参考:

http://www.mycelly.com/ https://caniuse.com/ https://www.w3.org/TR/css-flexbox-1/

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-05-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档