CSS弹性盒模型flex在布局中的应用详解

什么是弹性盒模型flex

弹性盒模型（Flexible Box Layout）是一种用于页面布局的CSS3模块。它可以在不同大小的屏幕上自适应地调整布局，使得页面看起来更加美观和统一。弹性盒模型主要依靠flex容器、flex项目、方向、对齐等概念来实现布局效果。

如何定义弹性盒模型flex

在一个盒子中定义一个灵活的布局，使用以下代码：

.container {
  display: flex;
}

在上述代码中，.container是弹性盒的容器，注意到 display: flex; 设置了容器的为弹性布局。

弹性盒容器与项目

• 弹性盒容器：包裹着所有的项目的父级容器，在css中用 display:flex;将容器设置为弹性布局。

• 弹性盒项目：在弹性盒容器中的子元素，我们可以通过css的属性来定义每个项目的宽度、长度、对齐方式等。

弹性盒方向

在定义弹性盒容器的属性中，设置了flex-direction，可以改变项目的排列方向。

代码示例：

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

.container {
  display: flex;
  flex-direction: row;
}

在上述代码中，flex-direction: row;定义了项目按行排列。

有以下四个属性值：

• row：默认值，左到右排列（横向）。
• row-reverse：右到左排列（横向）。
• column：从上至下（纵向）排列。
• column-reverse：从下至上（纵向）排列。

弹性盒对齐方式

在弹性盒容器中，定义了 justify-content 和 align-items 两个属性，可以控制弹性盒项目的对齐方式。

• justify-content：水平方向上的对齐方式。
• align-items：垂直方向上的对齐方式。

代码示例：

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

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

在上述代码中，justify-content: center; 和 align-items: center; 将项目水平和垂直方向上都居中对齐。

有以下几个属性值：

• flex-start：默认值，项目向页面起始位置对齐。
• flex-end：项目向页面结束位置对齐。
• center：项目在容器内水平或垂直方向居中。
• space-between：项目间距均匀，第一个和最后一个项目贴边。
• space-around：项目间距均匀，项目两侧的间距是它们与其他项目间距的二分之一。

示例一

网页左右布局，左侧宽度固定，右侧宽度自适应

通过设置弹性盒子为display: flex;，并在内部设置两个子元素，一个设置固定宽度，一个不设置宽度。

HTML代码如下：

<div class="container">
  <div class="item fixed">Fixed</div>
  <div class="item">Auto</div>
</div>

CSS代码如下：

.container {
  display: flex;
}

.fixed {
  width: 200px;
  background-color: #4CAF50;
  color: #fff;
}

.item {
  background-color: #f1f1f1;
  padding: 20px;
  margin: 20px;
}

在上述代码中，fixed 类将左侧固定为 200 像素，item 类将右侧自适应大小。

示例二

网页等高布局，水平方向等分，垂直方向也等分

HTML代码如下：

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

CSS代码如下：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100vh;
  border: 1px solid #ccc;
}

.item {
  flex: 1;
  background-color: #f1f1f1;
  padding: 20px;
  margin: 20px;
}

在上述代码中，flex: 1; 将三个靠近同等份布局，并且 flex-direction: column; 使其垂直排列，justify-content: space-between; 使其等间距垂直对齐，align-items: stretch; 将项目沾满整个容器高度。

总结

以上通过示例演示了弹性盒模型flex在布局中的应用，掌握了弹性盒的方向、对齐等属性，就能够轻松地完成复杂的布局。