CSS3/ 弹性布局flex

Posted 2021-06-23 紫色烟云

需知：

• flex布局表示弹性布局
• 任何一种元素都可以设置且当它设置 display:flex ,则开启了弹性布局,它成为弹性容器,它的所有子元素成为待排布的项目
• 开启弹性布局后,容器内待排布的项目的float,clear,vertical-align属性都将失效,所以排布元素时应优先使用弹性布局
• 容器有默认的水平主轴和升起的交叉轴，项目在容器中默认沿主轴排列

flex容器的常用属性：

• flex-direction （flex-direction 属性规定灵活项目的方向）
• flex-wrap （flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向）
• flex-flow （flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性）
• justify-content （justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式）
• align-items （align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式）
• align-content （align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直））

flex项目的常用属性

• flex-grow （flex-grow 属性用于设置或检索弹性盒子的扩展比率）
• flex-shrink （flex-shrink 属性指定了 flex 元素的收缩规则）
• flex-basis （flex-basis 属性用于设置或检索弹性盒伸缩基准值）
• flex （flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性）
• order （order 属性 设置或检索弹性盒模型对象的子元素出现的順序）
• align-self （align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式）

@沉木