display: flex;做排列

display: flex; 用于创建一个弹性容器，其中的子元素按照一定的排列方式进行布局。默认情况下，弹性容器的主轴是水平方向，子元素被水平排列。

使用flex-direction属性可以改变主轴的方向，有四个可选值：row、row-reverse、column、column-reverse。当flex-direction设置为row时，子元素从左到右排列；当设置为row-reverse时，子元素从右到左排列；当设置为column时，子元素从上到下排列；当设置为column-reverse时，子元素从下到上排列。

通过使用align-items属性，可以控制子元素在交叉轴上的对齐方式。有五个可选值：flex-start、flex-end、center、baseline、stretch。当align-items设置为flex-start时，子元素在交叉轴上顶部对齐；当设置为flex-end时，子元素在交叉轴上底部对齐；当设置为center时，子元素在交叉轴上居中对齐；当设置为baseline时，子元素基线对齐；当设置为stretch时，子元素在交叉轴上拉伸填充容器。

综上所述，display: flex; 可以将子元素进行一行或一列的排列，flex-direction可以决定排列的方向，而align-items可以控制子元素在交叉轴上的对齐方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [display:flex详解](https://blog.csdn.net/Anony_me/article/details/125524220)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]