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/