Flex布局详解
浮动布局的优缺点
- 图文的环绕显示；
- 浮动元素 同行显示；
- 适配性更好；
- 忘记清浮动-高度坍塌；
flex布局的优缺点
flex布局
-
flex/flexible(弹性布局)
-
移动端用的最多，PC越来越多；
两个重要概念
- 外边开启flex布局的元素叫 flex container；
- flex container 里边的
直接子元素叫做 flex items；
如何开启flex布局
设置display属性为flex或者inline-flex
<html>
<title></title>
<style>
.box {
/* 两个值：
flex：块级 block-level形式的flex container
inline-flex：行内 inline-level形式的flex container
*/
display:flex;
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
flex布局模型
flex container：
-
main axis（主轴）
- main size
- main start
- main end
-
cross axis（交叉轴）
- cross size
- cross start
- cross end
flex item
…
主轴是会变的：
flex相关的属性
应用在flex container上的CSS属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
应用在flex items上的CSS属性
- flex
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- margin（补充属性，详见文末）
flex container属性详解
flex-direction
flex items 默认是沿着main axis从main strat 向 main end方向排布；
flex-direction决定了主轴的方向，默认值row，共四个值；
- row：从左-右
- row-reverse：从右-左
- column：从上-下
- column-reverse：从下-上
row
row-reverse
column
column-reverse
justify-content
justify-content 决定了flex items在main axis上的对齐方式，共6个值：
- flex-start（默认值）：与main start对齐
- flex-end：与main end对齐
- center：居中对齐
- space-between:
flex items 之间的距离相等；
与main start、main end两端对齐；
- space-evenly:
flex items 之间距离相等；
flex items与main start、main end 之间的距离 等于flex items之间的距离；
- space-around:
flex items之间距离相等
flex items与main start、main end之间的距离是flex items之间距离的一半；
注：通过补空元素可以实现多行的间距自然等分；
示意：
flex-start
flex-end
center
space-between
space-evenly
space-around
align-items
align-items 决定了flex items 在cross axis上的对齐方式，共6个值；
- normal（默认值）：在弹性布局中，效果和stretch一样；如果设置了侧轴方向高度效果就和flex-start一样；
- stretch：当flex items在cross axis方向的size为auto时（没设值），会自动拉伸至填充flex container（的高度）；
前提是不能指定高度；
- flex-start：与cross start对齐；
- flex-end：与cross end对齐；
- center：居中对齐；
- baseline：与基线对齐（第一个item的内容底部->基线，且各个item的基线都是以第一行内容为准）；
示意：
normal
stretch
flex-start
flex-end
center
baseline
flex-wrap
flex-wrap 决定了flex container是单行还是多行，共3个值：
- nowrap（默认）：单行；
多的item会引起，全部items的宽度压缩；
- wrap：多行；
- wrap-reverse：反向多行（第一行在底下，后续行依次向上，items次序不变）；
示意：
nowrap
wrap
wrap-reverse
flex-flow
flex-flow是flex-direction || flex-wrap的缩写属性，顺序任意；
flex-flow: row-reverse wrap;
align-content
align-content 决定了 多行flex items 在 cross axis上的对其方式，和justify-content类似，共7个值：
- stretch（默认值）：不设侧轴方向高度，拉伸；
- flex-start：与cross start对齐；
- flex-end：与cross end对齐；
- center：居中对齐；
- space-between：
flex items 之间距离相等；
与cross start、cross end两端对齐；
- space-around:
flex items之间的距离相等；
flex items与cross start、cross end之间的距离是flex items之间距离的一半；
- space-evenly：
flex items之间的距离相等；
flex items与cross start、cross end之间的距离等于flex items之间的距离；
示意：
stretch
无高度
有高度
flex-start
flex-end
center
space-between
space-around
| - |
- |
- |
| 1 |
2 |
3 |
| - |
- |
- |
| - |
- |
- |
| 4 |
5 |
6 |
| - |
- |
- |
space-evenly
| - |
- |
- |
| 1 |
2 |
3 |
| - |
- |
- |
| 4 |
5 |
6 |
| - |
- |
- |
flex items属性详解
order
order 决定了flex items的排布顺序；
- 可以设置任意整数（正整数、负整数、0），值越小，越会排到前面；
- 默认值是0；
示意：
默认
2的order设为10，1的order设为50，3的order设为100
align-self
通过align-self可以覆盖flex container设置的align-items；
- auto（默认值）：遵从flex container的align-items设置；
- stretch、flex-start、flex-end、center、baseline，效果和align-items的值一致；
flex-grow
flex-grow 决定了flex items如何扩展：
- 可以设置任意非负数字（正小数、正整数、0），默认值是0；
- 当flex container在main axis方向上有剩余size时，flex-grow属性才会生效；
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为：
- flex container的 剩余size * flex-grow/sum；
- 即，按照百分比瓜分剩余size，分给每个item；
如果所有flex items的flex-grow 总和不超过1，每个flex item扩展的size为：
- flex container 的 剩余size * flex-grow；
- 即，按比例瓜分剩余size，但一定还有剩余；
注：flex items扩展后的最终size不能超过设置的max-width/max-height；
示意：
默认
1的flex-grow设为2，2的flex-grow设为2，3的flex-grow设为1；
1的flex-grow设为0.2，2的flex-grow设为0.2，3的flex-grow设为0.2；
| 1 |
1(0.2) |
2 |
2(0.2) |
3 |
3(0.2) |
- |
- |
flex-shrink
flex-wrap:nowrap;需要设置为不换行；
flex-shrink决定了flex items如何收缩：
- 可以设置任意非负数字（正小数、正整数、0），默认值是1；
- 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会生效；
如果所有flex items的flex-shrink总和sum超过1，每个flex item收缩的size为
- flex items超出 flex container的size*flex-shrink/sum；
如果所有flex items的flex-shrink综合sum不超过1，每个flex item收缩的size为：
- flex items超过flex container的size*flex-shrink；
注：收缩的宽度不能小于内容的宽；
注：flex items收缩后的最终size不能小于设置的min-width/min-height；
示意：
默认
1的flex-shrink设为2，2的flex-shrink设为2，3的flex-shrink设为1；
| 1(-0.4*size) |
2(-0.4*size) |
3(-0.2*size) |
1的flex-shrink设为0.2，2的flex-shrink设为0.2，3的flex-shrink设为0.2；
| 1(-0.2*size) |
2(-0.2*size) |
3(-0.2*size) |
超出显示0.4*size |
flex-basis
flex-basis 用来设置flex items在main axis方向上base size；
- 设置主轴上item宽度的大小；
- 默认值是auto，也可以设置具体的宽度；
决定flex items最终base size的因素，从优先级高到低：
- max-width/max-height/min-width/min-height
- flex-basis
- width/height
- 内容本身的size
flex
flex是 flex-grow || flex-shrink || flex-basis 的简写（放大 缩小 固定宽度），flex的值可以是1个、2个或3个值；
单值语法：值必须是以下其中之一
- 一个无单位数
（<number>）：会作为<flex-grow>的值；
- 一个有效宽度
（width）值：会作为<flex-basis>的值；
- 关键字none、auto或initial；
双值语法：第一个必须是无单位数、会作为<flex-grow>的值；
第二个值必须是以下之一：
- 一个无单位数
（<number>）：会作为<flex-shrink>的值；
- 一个有效宽度
（width）值：会作为<flex-basis>的值；
三值语法：
- 第一个必须是无单位数、会作为
<flex-grow>的值；
- 第二个必须是无单位数、会作为
<flex-shrink>的值；
- 第三个必须是有效宽度
（width）值：会作为<flex-basis>的值；
Tips CSS
文字居中：
text-align:center;
line-height:包裹块元素高度；
块水平居中：
margin: 0 auto;
补充属性
margin
在flexbox布局中有很强大的作用，如果给某个可伸缩项设置某个方向上的margin为auto，那么这个可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin；
示意：
默认
1的margin-right设为auto；
