一文学会Flex布局 - Nicander - 博客园

什么是Flex布局

Flex布局是指弹性盒模型，是一种用于页面布局的模型。Flex布局可以使用在普通的块级元素上，或者被应用到一个容器元素上。

在容器元素上应用Flex布局，容器的子元素将会改变它们在容器中的排列方式，包括它们的方向，对齐方式以及它们的大小。这种方式可以给我们带来更好的灵活性和响应式设计能力，使得我们可以轻松地适应不同的屏幕大小或设备。

如何使用Flex布局

使用Flex布局主要分为两个步骤：

1. 定义一个容器元素并在其上应用Flex布局；
2. 在容器中定义子元素的特定样式。

容器元素

在定义容器元素时，我们需要为该元素添加一个display:flex的样式，以表明这个元素需要使用Flex布局。其他的属性，例如flex-direction和justify-content等，也可以在这里进行配置：

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

其中，flex-direction表示容器元素的子元素布局方向，其可选值包括row（水平排列，默认）、column（垂直排列）、row-reverse（水平反向排列）以及column-reverse（垂直反向排列）。

justify-content是用来设置项目在主轴上的对齐方式（默认为左对齐），可选的属性值包括flex-start、flex-end、center、space-between以及space-around。

align-items属性则是用来设置项目在交叉轴上的对齐方式，可选的属性值包括flex-start、flex-end、center、stretch以及baseline。

子元素

在容器元素中定义子元素时，我们需要使用flex属性（或者它的缩写版本flex-grow、flex-shrink和flex-basis）来确定每个元素的尺寸和位置。

.item {
    flex: 1;
}

其中，flex属性可以接受三个值，分别对应着flex-grow、flex-shrink和flex-basis三个属性。默认情况下，元素将以flex:0 1 auto的方式进行布局。这意味着元素会在所有空间被占满后尽量按照它们的大小进行缩小。

我们也可以为每个子元素设置不同的flex属性，例如：

.item-1 {
    flex: 1;
}

.item-2 {
    flex: 2;
}

这样，.item-2元素的宽度将会是.item-1元素的两倍。

示例

下面是一个简单的例子，展示了如何使用Flex布局在一个简单的容器（.container）中横向排列3个子元素（.item）：

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

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  border: 1px solid black;
}

.item {
  flex: 0 0 calc(100% / 3);
  height: 50px;
  text-align: center;
  line-height: 50px;
}

这个例子展示了：

1. 使用display:flex来定义容器元素为Flex布局；
2. 使用flex-direction将子元素沿水平方向排列；
3. 使用justify-content: space-between将子元素之间的间距平分，让它们在容器中左右对齐；
4. 使用align-items: center将子元素在垂直方向上居中对齐。

结语

Flex布局是一种强大和灵活的布局模型，它可以让我们轻松地实现复杂的页面布局和响应式设计。在你的下一个项目中尝试一下Flex布局，看看它能带给你多少优势。