css display:flex 属性_display: flex-reverse;-优快云博客

本文详细介绍了CSS的display:flex属性，包括flex-direction、flex-wrap、justify-content、align-items和align-content等关键属性，帮助理解弹性布局的使用和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css display:flex 属性

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。下面我们就来说说flex的属性：
1.flex-direction 容器内元素的排列方向(默认横向排列)
（1）flex-direction:row; 沿水平主轴让元素从左向右排列。row是默认值，显示为行，方向为当前文档的水平流方向，默认情况下是从左往右。
（2）flex-direction:row-reverse;沿水平主轴让元素从右向左排列。row-reverse 显示为行，但方向和row属性值是反的。
（3）flex-direction:column; 让元素沿垂直主轴从上到下垂直排列，显示为列。
（4）flex-direction:column-reverse；让元素沿垂直主轴从下向上垂直排列，显示为列。方向和column属性值是相反的。
2.flex-wrap 容器内元素的换行处理
（1）flex-wrap: nowrap; (默认值)元素不换行处理。比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
（2）flex-wrap: wrap; 元素换行处理。比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
（3）wrap-reverse; 反向换行处理
（4）flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
3.justify-co