认识flex布局
开启了flex布局的元素叫flex container
flex container里面的直接子元素叫做flex items
开启flex布局方式:
设置display: flex; flex container以block-level形式存在
设置display: inline-flex; flex container以inline-level形式存在
flex布局模型
flex相关属性
-
flex-direction
flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布。
flex-direction决定了main axis的方向，有4个取值
row(默认值)：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上
row
row-reverse
column
column-reverse -
Justify-content
justify-content 决定了 flex items 在 main axis(主轴) 上的对齐方式。
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(交叉轴)上的对齐方式。
normal：在弹性布局中，效果和stretch一样
stretch：在没有设置高度的情况下，当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start：与cross start对齐
flex-end：与cross end对齐
center：居中对齐
baseline：与基准线对齐, 第一行文本的基线
stretch
flex-start
flex-end
center
baseline flex-wrap
flex-wrap 决定了 flex container 是单行还是多行。
nowrap(默认)：单行
wrap：多行
wrap-reverse：多行(对比wrap，cross start与cross end相反)
flex-flow
flex-flow是 flex-direction || flex-wrap的简写，可以省略，顺序任意。
flex-flow: column wrap;
注：多行时，items最后一行比上一行少，没有对齐，可以增加个空白元素，使与上一行items个数相同-
align-content
align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content 类似。
stretch(默认值)：与align-items的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之间距离
space-between order
order 决定了 flex items的排不顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面，默认值是0-
align-self
flex items 可以通过 align-self 覆盖flex container设置的align-items。
auto（默认值）：遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
box中item居中对齐，设置itme3底部对齐 flex-grow
- flex-glow决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认值是0;
当flex container在main axis方向上有剩余size时，flex-grow属性才会生效; - 如果所有flex items的flex-grow总和sum 大于1，每个flex items扩展的size为flex container的剩余size * flex-grow / sum（按flex-grow比例分）;
- 如果所有flex items的flex-grow总和sum 小于1，每个flex items扩展的size为flex container的剩余size * flex-grow（按flex-grow比例分）;
flex items扩展后的最终size不能超过max-width\max-height；
- flex-shrink
- flex-shrink 决定了flex items 如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值是1；
当flex items 在main axis方向上超过了flex container 的 size，flex-shrink属性才会生效； - 如果所有flex items的flex-shrink总和大于1，每个flex items收缩的size为：
flex items超出flex container的size * 收缩比例 / 所有flex items的收缩比例之和 - 如果所有flex items的flex-shrink总和小于1，每个flex item收缩的size为：
flex items超出flex container的size * sum * 所有flex items的收缩比例之和
收缩比例 = flex-shrink * flex item的base size
base size就是flex item放入flex container之前的size
注：flex items 收缩后的最终size不能小于min-width\min-height
-
flex-basis
flex-basis用来设置 flex items在 main axis方向上的base size:
取值：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>的值
第二个值必须是以下之一：
一个无单位数：它会被当做<flex-shrink>的值
一个有效的宽度（width）: 它会被当做<flex-basis>的值
三值语法：
第一个值必须是一个无单位数。并且它会被当做<flex-grow>的值
第一个值必须是一个无单位数。并且它会被当做<flex-shrink>的值
第三个值有效的宽度（width）: 它会被当做<flex-basis>的值
