css3 flex

作者：孤独的角落发布日期:2026-03-19 浏览:80

/* 使用 CSS3 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;：将父级容器设置为 Flex 布局，使子元素可以按照 Flex 规则进行排列。
justify-content: space-between;：水平方向上将子元素均匀分布，两端对齐。
align-items: center;：垂直方向上将子元素居中对齐。
flex: 1;：每个子元素将等分父容器的剩余空间。

上一篇：css 禁用滚动条

下一篇：css单行省略号