css 弹性容器 |css text 文字靠下

CSS弹性容器包括两个元素：弹性容器和弹性项。弹性容器是一个带有 display:flex 属性的容器，而弹性项则是容器中的每个子元素。弹性容器中的元素可以按照水平或垂直方向灵活地布局，并支持对元素之间的间距、对齐方式、方向和大小的设置。

.container {
display: flex; /* 将容器声明为弹性容器 */
justify-content: center; /* 将容器中的元素水平居中排列 */
flex-wrap: wrap; /* 弹性容器中的元素自动换行 */
}
.item {
flex: 1; /* 将元素设为弹性项，并使其尽可能地占满父容器 */
margin: 10px; /* 设置元素之间的间距 */
}

使用CSS弹性容器可以更轻松地实现响应式布局。例如，在移动设备上，可以通过设置元素的方向和大小来使它们垂直布局，并在大屏幕设备上使它们水平布局。

总之，CSS弹性容器是一种优雅且实用的Web布局工具，它使Web设计变得更加灵活和动态。通过使用这个工具，开发者可以更轻松地实现自适应布局和响应式设计。