css flex 布局

作者：萫蕉姺森う发布日期:2025-04-12 浏览:112

/* 使用 CSS Flex 布局的示例代码 */

.container {
  display: flex; /* 将容器设置为 flex 布局 */
  justify-content: space-between; /* 水平方向上子元素之间的间距分布 */
  align-items: center; /* 垂直方向上对齐子元素 */
}

.item {
  flex: 1; /* 子元素可以自适应宽度 */
  margin: 10px; /* 设置子元素的外边距 */
}

<!-- HTML 结构 -->
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

解释说明：

display: flex;：将 .container 设置为一个弹性盒子容器，使内部的子元素（.item）成为弹性项目。
justify-content: space-between;：在水平方向上，子元素之间会均匀分布，首尾元素分别靠在容器的两端。
align-items: center;：在垂直方向上，子元素会居中对齐。
flex: 1;：使每个子元素都能根据剩余空间自适应宽度，确保它们均匀占据容器的宽度。

上一篇：css边框发光效果

下一篇：换行css