Flexbox CSS介绍

Flexbox是一种基于CSS3的布局模式，也称为Flexible Box Layout，可以创建更灵活的、可适应不同屏幕尺寸的布局。它是现代web开发中的一项重要技术。

容器和项目

在Flexbox中，有两个主要概念：容器和项目。

容器是指包含Flex项目的父元素，需要在CSS里设置为 display: flex 或 display: inline-flex。

项目是容器中的子元素，可以使用Flexbox的属性来控制项目的位置和大小。

主轴和侧轴

Flexbox布局有一个主轴和一个侧轴。主轴是沿着Flex容器的方向延伸的轴线，可以设置为水平或垂直方向。侧轴是与主轴垂直的轴线。

在Flexbox中，主轴和侧轴的方向可以通过 flex-direction 属性进行设置。如果设置为 row，则主轴是水平方向，侧轴是垂直方向；如果设置为 column，则主轴是垂直方向，侧轴是水平方向。

Flexbox属性

Flexbox提供了一组属性，可以控制Flex项目的排列和分布，这些属性包括：

• display：设置为 flex 或 inline-flex 来定义Flex容器。

• flex-direction：设置主轴的方向，可选值有 row、row-reverse、column、column-reverse。

• justify-content：设置沿主轴的对齐方式，可选值有 flex-start、 center、 flex-end、 space-between、space-around、 space-evenly。

• align-items：设置沿侧轴的对齐方式，可选值有 flex-start、 center、 flex-end、 stretch、 baseline。

• flex-wrap：定义沿主轴是否换行，可选值有 nowrap、wrap、wrap-reverse。

• align-content：用于控制多行Flex项目的对齐方式，可选值有 flex-start、 center、 flex-end、 space-between、space-around、 stretch。

• flex-grow：定义Flex项目的扩展比例，数字越大，所占比例越大。

• flex-shrink：定义项目的收缩比例。

• flex-basis：定义项目的初始大小。

• flex：使用 flex-grow、flex-shrink 和 flex-basis 属性的简写方式。

• order：定义项目的排列顺序。

示例代码

以下是一个基本的Flexbox布局示例：

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

.item {
  flex: 1;
  height: 100px;
}

.item-1 {
  background-color: red;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: blue;
}

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

以上代码将会使三个Flex项目在水平方向上居中对齐，宽度平均分配。其中，.item 的 flex:1 表示将剩余空间等分给三个项目。

结语

Flexbox布局是一种灵活、适应性强的布局方式，可以在不同的屏幕尺寸上自适应，是现代web开发必须掌握的技术之一。如果您还没有学习过Flexbox，那么现在就是时候开始学习了！