01_1 flex-direction

flex-direction属性用于控制子项的整体布局方向，可选值包括从左到右、从右到左、从上到下和从下到上。

取值	含义
row	默认值，表示子项按行排列，方向为当前文档的水平流方向（通常从左到右）
row-reverse	子项按行排列，但方向与row相反
column	子项按列排列
column-reverse	子项按列排列，但方向与column相反

01_2 flex布局特性

当子项的宽度超过父容器设定宽度时，内容会自动平均分配宽度；若内容超过可分配宽度，则会溢出。

01_3 flex-wrap

flex-wrap属性用于控制子项的换行方式。

取值	含义
nowrap	默认值，子项单行显示，不换行
wrap	宽度不足时换行显示
wrap-reverse	宽度不足时换行显示，但从下向上开始

01_4 flex-flow

flex-flow是flex-direction和flex-wrap的简写，用于定义flex布局的流动性。语法格式为：flex-flow: <direction> <wrap></

`01_5 justify-content`

justify-content属性决定主轴方向上子项的对齐方式。

取值	含义
flex-start	默认值，子项起始位置对齐
flex-end	子项结束位置对齐
center	子项居中对齐
space-between	两端对齐，空白间距只在元素中间分配
space-around	子项两侧空白间距相等
space-evenly	每一行子项上下空白间距相等

`01_6 align-items`

align-items属性用于控制flex子项在侧轴方向上的对齐方式。

取值	含义
stretch	默认值，子项拉伸至相同高度
flex-start	子项顶部对齐
flex-end	子项底部对齐
center	子项居中对齐

`01_7 align-content`

align-content属性用于多行flex子项的对齐方式，通常与align-items结合使用。

取值	含义
stretch	默认值，每一行子项等比拉伸
flex-start	起始位置对齐
flex-end	结束位置对齐
center	居中对齐
space-between	两端对齐
space-around	每行子项上下空白间距相等
space-evenly	每行子项上下空白间距完全相等

`01_8 总结`

flex-direction、flex-wrap、justify-content、align-items、align-content等属性需添加在父元素的CSS样式中。这些属性主要用于控制flex容器内子项的排列方式和对齐效果。通过合理配置这些属性，可以实现多种flex布局效果，例如垂直方向的排列、内容换行、子项对齐方式等。

转载地址：http://spoo.baihongyu.com/

你可能感兴趣的文章

OpenCV与AI深度学习 | 基于PyTorch语义分割实现洪水识别（数据集 + 源码）