CSS3 实现响应式 FlexBox 布局技巧

前言

响应式设计是现代网站设计的必备技能，而 FlexBox 是一种灵活、强大的 CSS 布局方式。本文将会介绍如何使用 CSS3 实现响应式 FlexBox 布局，包括常用的 FlexBox 属性和技巧。

FlexBox 简介

FlexBox 是指 Flexible Box，是一种弹性布局，它可以根据容器的大小自动调整元素的大小和位置，非常适合响应式设计。它的主要组成部分包括容器（display: flex）和项目（flex: value），其中容器是指包含项目的父元素，项目是指容器中的子元素。

常用的 FlexBox 属性

容器属性

display

设置容器为 FlexBox 布局：

.container {
  display: flex;
}

flex-direction

设置主轴的方向，即项目排列的方向：

.container {
  flex-direction: row /* 默认值，水平方向排列 */;
  flex-direction: row-reverse /* 水平方向相反排列 */;
  flex-direction: column /* 垂直方向排列 */;
  flex-direction: column-reverse; /* 垂直方向相反排列 */
}

justify-content

设置主轴上项目的对齐方式：

.container {
  justify-content: flex-start /* 默认值，左对齐 */;
  justify-content: flex-end /* 右对齐 */;
  justify-content: center /* 居中对齐 */;
  justify-content: space-between /* 平均分布 */;
  justify-content: space-around /* 平均分布，间距相等 */;
}

align-items

设置交叉轴上项目的对齐方式：

.container {
  align-items: flex-start /* 顶部对齐 */;
  align-items: flex-end /* 底部对齐 */;
  align-items: center /* 居中对齐 */;
  align-items: stretch /* 默认值，拉伸对齐 */;
  align-items: baseline /* 基线对齐，以项目中的文字为基准线 */;
}

align-content

设置多行排列的交叉轴上的对齐方式：

.container {
  align-content: flex-start /* 顶部对齐 */;
  align-content: flex-end /* 底部对齐 */;
  align-content: center /* 居中对齐 */;
  align-content: space-between /* 平均分布 */;
  align-content: space-around /* 平均分布，间距相等 */;
  align-content: stretch /* 默认值，拉伸对齐 */;
}

项目属性

order

设置项目的排列顺序，值越小排列越靠前：

.item {
  order: <integer>;
}

flex-grow

设置项目放大比例：

.item {
  flex-grow: <number> /* 默认为 0，不能放大 */;
}

flex-shrink

设置项目收缩比例：

.item {
  flex-shrink: <number> /* 默认为 1，可以收缩 */;
}

flex-basis

设置项目占据主轴的空间大小：

.item {
  flex-basis: <length> /* 像素、百分比等 */;
  flex-basis: auto /* 默认值，根据内容自动调整 */;
}

flex

以上三个属性的缩写，分别对应 flex-grow、flex-shrink、flex-basis，可以快速设置项目的弹性：

.item {
  flex: <grow> <shrink> <basis> /* 根据需要设置 */;
}

align-self

在交叉轴上单独设置项目的对齐方式：

.item {
  align-self: auto /* 默认值，继承父元素的对齐方式 */;
  align-self: flex-start /* 顶部对齐 */;
  align-self: flex-end /* 底部对齐 */;
  align-self: center /* 居中对齐 */;
  align-self: stretch /* 拉伸对齐 */;
  align-self: baseline /* 基线对齐，以项目中的文字为基准线 */;
}

FlexBox 布局技巧

响应式布局

响应式设计是现代网站设计的必备技能，而 FlexBox 布局非常适合实现响应式设计。可以使用媒体查询（@media）来设置不同场景下的 FlexBox 布局，如下所示：

-- -------------------- ---- -------
---------- -
  -------- -----
  --------------- ----
  ---------------- --------------
  ------------ -------
-

------ ----------- ------ - -- ------------- --
  ---------- -
    --------------- -------
  -
-

水平垂直居中

使用 FlexBox 布局可以轻松实现水平垂直居中，如下所示：

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

圆形布局

使用 FlexBox 布局可以轻松实现圆形布局，如下所示：

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------- -------
  ------------ -------
-

----- -
  ------ -----
  ------- -----
  -------------- ----
  ----------------- --------
-

等宽布局

使用 FlexBox 布局可以实现等宽布局，如下所示：

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------- --------------
-

----- -
  ----------- --
  ---------- --
-

总结

FlexBox 是一种灵活、强大的 CSS 布局方式，可以实现响应式设计、水平垂直居中、圆形布局、等宽布局等任何需求。希望本文能够对前端开发人员提供帮助，为 CSS3 实现响应式 FlexBox 布局提供一些技巧指导。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455e56b968c7c53b094084a