Flex布局

父项属性

1.flex-direction设置主轴的方向

2.justify-content设置主轴子元素对其方式

3.flex-warp设置是否换行

4.align-content设置侧轴元素对其方式（多行）

5.align-items设置侧轴元素对其方式（单行）

6.flex-flow复合属性，相当于同时设置了 flex-warp，flex-direction

flex-direction：子项目的排列方向（设置主轴的方向）

flex-direction属性值包括row、row-reverse、column、column-reverse。flex-direction是Flex布局中的关键属性，用于设置弹性容器的主轴方向，这直接影响着内部弹性元素的排列与布局。

row（默认值）：该值表示弹性容器的主轴方向为水平行，即项目从左到右排列。

row-reverse：此值将项目从右到左排列，即主轴方向水平行但顺序与row相反。

column：此值将项目从上到下排列，主轴方向为垂直列。

justify-content属性包括多个值：flex-start、flex-end、center、space-between、space-around等。

1. flex-start（默认）：这个属性值会将弹性容器内的所有元素向主轴线的起点靠拢，即行头紧挨着填充[^1^]。在这种配置下，第一个弹性项的外边距边线与行的main-start边线重合，而后续的弹性项则依次平齐摆放。这种布局方式符合自然的阅读顺序，适用于从左到右和从上到下的语言环境。

2. flex-end：此属性值与flex-start相反，它将弹性容器内的元素向主轴线的终点靠拢，也就是行尾紧挨着填充[^1^]。在此设置下，第一个弹性项的外边距边线被放置在行的main-end边线，而后续的弹性项则顺次排列。这在特定的用户界面设计中很有用，比如某些弹出菜单或特殊布局的需求。

3. center：使用center属性值会使弹性容器内的元素在主轴线上居中显示[^1^]。如果容器内部还有剩余空间，则这些元素会相互紧挨在一起。这种对齐方式常用于需要中心点对称布局的设计中，例如在页面的中心显示一个按钮或者消息盒子。

4. space-between：这个属性值会将弹性容器内的元素平均分布在整个主轴线上，使得每个元素的间隔相等，但是首尾元素紧贴容器的边缘[^1^][^2^]。这种布局方式特别适用于导航栏、图片展示等场景，它能够保证即使移除某个元素也不会影响其他元素的均匀分布。

5. space-around：与space-beteen类似，不过在此基础上，space-around会在首尾元素与容器边缘之间也留出一半的间隔空间[^1^][^2^]。这种布局方式给界面带来更加统一和和谐的视觉效果，适合于卡片集、均分条目等设计。

响应式网页设计和现代用户界面经常需要更复杂的布局控制，为此，CSS为justify-content属性提供了额外的值以满足这些需求。例如，stretch值可以让弹性元素拉伸以适应容器的大小[^2^]；space-evenly值则确保每个元素之间的间隔完全相等，包括与容器边缘的间距[^4^]。同时，safe和unsafe关键字允许开发者控制内容溢出时的行为[^4^]。