flex-基础详解

1、flex相关的属性

• 应用在flex container上的CSS属性

flex-flow flex-direction flex-wrap justify-content align-items align-content

• 应用在flex item 上的CSS属性

flex flex-grow flex-basis flex-shrink order align-self

2、弹性盒子详情

3、开启弹性盒子

display: flex/inline-flex;

注意：厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。

4、flex container上的CSS属性详解

• justify-content

决定了flex items在主轴的对齐方式 -->

• align-items

决定了flex items在侧轴的对齐方式 |

• flex-wrap

决定了flex container是单行还是多行

• align-content

决定了多行flex items在侧轴的垂直对齐方式，属性用法与justify-content类似

• flex-direction

指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向

• flex-flow

是 flex-direction 和 flex-wrap 的简写
示例：flex-flow: column-reverse wrap;

5、flex items 上的CSS属性详解

• order

决定flex items 的排布顺序

• align-self

可以通过align-self覆盖flex contanier设置的align-items(自身垂直对齐)

• flex-grow

决定flex items 如何扩展（通过剩余宽度，当作1）

flex-grow的值总和小于等于1：flex-grow的值 * 剩余宽度。
flex-grow的值总和大于1：剩余宽度 * （flex-grow的值 / 总和）

• flex-shrink

决定flex items 如何收缩（通过超出宽度，当作1） 即自身缩小，超过1，超出部分乘于比例，不超1过以自身的宽

• flex-basis

设置长度

• flex

缩写

感谢b站，感谢视频制作者，感谢MDN
developer.mozilla.org/zh-CN/docs/…