详解CSS中的flex布局

概述

flex布局是一种强大的CSS布局方式，它可以在不使用传统的float或position布局情况下，实现弹性和自适应的布局效果。使用flex布局，可以使得网页页面更加灵活、简洁，并且可以快速对不同尺寸的设备做出响应。

属性介绍

使用flex布局，需要在容器上应用display: flex或display: inline-flex来定义一个flex容器，如下所示：

.container {
  display: flex;
}

容器的子元素成为flex项目，其属性由一系列的子属性构成，包括：

• flex-grow：用于指定flex项目在同一行里的占据大小，默认值为0，即不占用空间。如果所有flex项目的flex-grow值相同，则它们平分剩余空间，如果值为2，则在有剩余空间时它占用的空间是其他项目所占空间的两倍。

• flex-shrink：用于指定一个flex项目在空间不足时，减小的比例。默认值为1，即如果空间不足，该项目会缩小。如果所有flex项目的flex-shrink值相同，它们会等比例缩小。

• flex-basis：用于指定一个flex项目在父容器中的初始大小。它可以是一个具体的像素值，也可以是一个相对值，比如百分比或auto。

• flex：是flex-grow、flex-shrink和flex-basis三个属性的简写模式。例如，flex: 1 1 auto; 表示flex-grow: 1、flex-shrink: 1和flex-basis: auto三个属性的组合。

示例

示例1: 实现简单的等分布局

代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
}
.box {
  flex: 1;
}

解析：

容器使用flex布局，子元素的flex属性值都为1，这意味着三个子元素将等分容器的宽度，按照弹性布局排列在一行。

示例2: 通过卡片布局实现项目自适应

代码如下：

<div class="container">
  <div class="card">
    <img src="http://placehold.it/200x200" alt="">
    <h3>Card Heading</h3>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p><a href="#">Read More &rsaquo;</a></p>
  </div>
  <div class="card">
    <img src="http://placehold.it/200x200" alt="">
    <h3>Card Heading</h3>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p><a href="#">Read More &rsaquo;</a></p>
  </div>
  <div class="card">
    <img src="http://placehold.it/200x200" alt="">
    <h3>Card Heading</h3>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p><a href="#">Read More &rsaquo;</a></p>
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 33.33%;
  margin: 0 1%;
}

解析：

容器使用flex布局，设置了flex-wrap: wrap属性，这样在空间不足时子元素就会自动换行并适应内容。子元素使用相对百分比宽度及外边距来实现等分，并且用width、height来控制它的区域大小，这样便可以实现类似于响应式的卡片布局。

结语

以上是使用flex布局的一个简单介绍，如果你想深入学习，可以多看一些flex布局的相关资料或者尝试一些不同的样式属性与组合以实现更多复杂的布局效果。