弹性布局display:flex

弹性布局(display:flex)是CSS的一种布局模式，它是CSS3中新增加的一种布局方式。相较于传统的盒模型(display:block/inline-block)布局，弹性布局有以下优点：

1. 自适应性强：弹性布局可以实现多种设备上的自适应布局，可以根据屏幕大小、设备类型等进行自动调整。

2. 空间利用率高：弹性布局可以自动排列元素，最大限度地利用空间。

3. 灵活性强：弹性布局可以轻松地改变元素的排列顺序，以及调整它们之间的间距、对齐方式等。

4. 适用性广：弹性布局可以适用于各种布局需求，包括导航菜单、列表、网格布局等。

要使用弹性布局，需要将父元素的display属性设置为flex，然后通过设置flex-direction、justify-content、align-items等属性，来控制子元素的排列方式。例如：

<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
text-align: center;
}
</style>

上述代码中，flex-container是父元素的类名，item是子元素的类名。通过设置父元素的display属性为flex，并设置flex-direction为row，即可让子元素水平排列。设置justify-content为center，即可让子元素水平居中对齐。设置align-items为center，即可让子元素垂直居中对齐。最后，通过设置子元素的flex属性，可以让它们平均分配宽度。