display: flex

display: flex 是用于将一个元素设置为弹性容器的CSS属性。弹性容器是通过弹性布局（Flexbox）来排列和对齐其子元素的一种方式。

弹性布局的特点包括可以更灵活地布局和对齐子元素、自适应调整元素的大小、可以轻松实现响应式设计等。通过设置flex属性，可以控制弹性子元素在容器中的行为。

具体来说，flex属性是flex-grow, flex-shrink 和 flex-basis的简写形式。flex-grow用于控制子元素在剩余空间中的扩展比例，flex-shrink用于控制子元素在空间不足时的收缩比例，而flex-basis用于设置子元素的初始大小。

另外，display: flex还可以与其他属性配合使用，例如flex-direction用于指定子元素的排列方向、flex-wrap用于控制子元素是否换行、align-items用于控制子元素在交叉轴上的对齐方式，等等。

总结起来，display: flex用于将一个元素设置为弹性容器，通过设置flex属性以及其他相关属性，可以灵活地布局和对齐容器内的子元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [弹性盒子（display: flex）布局超全讲解|Flex 布局教程](https://blog.csdn.net/weixin_48998573/article/details/131240067)[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 ]