Flex布局笔记
认识flex布局
- flex布局是目前web开发中使用最多的布局方案
- flex布局(Flexible布局，弹性布局)
- 目前特别在移动端用的最多，PC端使用也越来越多
- 两个重要概念
- 开启了flex布局的元素：flex-container
- flex container 里的直接子元素：flex items
- 设置display属性为flex或者inline-flex可以成为flex container
- flex：flex container 以block-level形式存在
- inline-flex：flex container 以 inline-level形式存在
flex局模型
主轴：main axis 主轴开始位置：main start 主轴结束位置：main end 主轴大小：main size
交叉轴：cross axis 交叉轴开始位置：cross start 交叉轴结束位置：cross end 交叉轴大小：cross size
flex相关属性
| 应用在flex container上的css属性 | 应用在flex items 上的css属性 |
|---|---|
| flex-flow | flex |
| flex-direction | flex-grow |
| flex-wrap | flex-basis |
| justify-content | flex-shrink |
| align-items | order |
| align-content | align-self |
flex container上的css属性
1.Flex-direction
- flex items 默认沿着main axis从main start 开始往main end方向排布
- flex-direction：绝定主轴的方向
- row：从左到右
- row-reverse：反向 从右到左
- column：改列 从上往下
- column-reveerse：方向列排列 从下往上
2.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之间距离的一半
3.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：与基准线对齐
4.flex-wrap
- flex-wrap：决定了flex container是单行还是多行
- nowrap(默认)：单行
- wrap：多行
- wrap-reverse：多行（对比wrap，cross start与cross end相反）
- flex-flow：是flex-direction || flex-warp的简写
- 可以省略，顺序任意
5.align-content
- align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-ontent类似
- stretch(默认值)：与align-iitems的类似
- 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 ites之间距离的一半
- space-evenly：
- flex items之间的距离相等；flex items 与cross start、cross end 之间的距离 等于flex items之间的距离
flex items 上的css属性
1.order
- order：决定了flex items的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小排越后
- 默认为0
2.align-self
- flex items：通过align-self覆盖flex container设置的align-items
- auto(默认值)：遵从flex container 的align-items设置
- stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
3.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
- 如果所有flex items的flex-grow总和不超过1，每个flex item扩展的size为
- flex container的神谕size*flex-grow
- flex items扩展后的最终size不能超过max-width\max-height
4.flex-shrink
- flex-shrink：决定了flex items如何收缩
- 可以设置任意非负数字（正小数、正整数、0），默认值为1
- 当flex items在main axis 方向sang超过了flex container的size，flex-shrink属性才会有效
- 如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为
- flex items 超出 fex container的size * 收缩比例/所有flex items的收缩比例之和
- 收缩比例=flex-shrink*flex item的base size
- base size就是flex item放入flex container之前的size
- flex items收缩后的最终size不能小于min-whidth\min-height
5.flex-basis
- flex-basis用来设置flex items在main axis方向上的base size
- auto（默认值）、具体的宽度数值（100px）
- 决定flex items最终base size的因素，优先级从高到低
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的size
6.flex
- flex是flex-grow || flex-shrink || flex-basis 的简写，flex属性可以指定1个，2个或3个值。
- 单值语法：值必须为以下其中之一：
- 一个无单位数（
)：它会被当作 的值。 - 一个有效的宽度（width）值：它会被当作
的值。 - 关键字none，auto或initial.
- 一个无单位数（
- 双值语法：第一个值必须为一个无单位数，并且它会被当作
的值。 - 第二个值必须为以下之一：
- 一个无单位数：它会被当作
的值。 - 一个有效的宽度值：它会被当作
的值。
- 一个无单位数：它会被当作
- 第二个值必须为以下之一：
- 三值语法：
- 第一个值必须为一个无单位数，并且它会被当作
的值。 - 第二个值必须为一个无单位数，并且它会被当作
的值。 - 第三个值必须为一个有效的宽度值，并且它会被当作
的值.
- 第一个值必须为一个无单位数，并且它会被当作
