CSS权威指南Flexbox

作者：System 时间：2024年08月23日分类：所有,css3 字数：602

在CSS中，Flexbox布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。Flexbox可以用来创建一个容器，该容器的子项可以在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是一个简单的Flexbox示例，它将创建一个水平排列的项目列表，并在容器中均匀分配空间：




.container {
  display: flex; /* 指定为Flexbox布局 */
}
 
.item {
  flex: 1; /* 所有项目均等分配容器空间 */
}




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

在这个例子中，.container 设置了 display: flex; 以指定使用Flexbox布局。.item 类设置了 flex: 1;，这意味着所有子项将等分容器的空间。

Flexbox还提供了其他强大的功能，如项目的对齐方式、顺序、弹性尺寸等。这只是Flexbox功能的一个简单介绍，Flexbox是现代Web开发中一个非常有用的工具。