flex 布局

发表于 2023-12-06 更新于 2024-07-29 分类于技术阅读次数：本文字数： 1.4k 阅读时长 ≈ 5 分钟

简介

FLEXBOX CSS3 中的一种布局模式，它可以帮助开发者更加方便地实现自适应布局和响应式设计。FLEXBOX 基于弹性盒子模型，通过对容器和容器内元素的属性设置来实现灵活的布局。

在 FLEXBOX 中，容器是指设置了 display:flex 或 display:inline-flex 属性的元素，容器内的元素则是指容器的子元素。通过设置容器和容器内元素的属性，可以实现以下功能：

弹性布局：容器内的元素可以根据容器的大小和方向自动调整位置和大小，从而实现弹性布局。
对齐方式：可以通过设置 justify-content 和 align-items 属性来实现容器内元素的水平和垂直对齐。
排列方式：可以通过设置 flex-direction 属性来实现容器内元素的排列方式，包括水平排列和垂直排列。
元素间距：可以通过设置 justify-content 和 align-items 属性来实现容器内元素的间距和间隔。
元素排序：可以通过设置 order 属性来实现容器内元素的排序，从而实现元素的前后顺序调整。

基本概念

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）。

常见用法

父容器设置

首先，需要选择将哪些元素设置为弹性盒子，给些元素的父元素设置

1
2
3

display:flex
/* 或者 */
display:inline-flex

设置主轴的方向

默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下
注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

1	flex-direction: column;

换行

1	flex-wrap: wrap;

缩写

1 2	flex-direction: row; flex-wrap: wrap;

等价于

1	flex-flow: row wrap;

`justify-content` 设置主轴上的子元素排列方式，常用配置如下：

flex-start: 子元素沿主轴起点对齐。
flex-end: 子元素沿主轴终点对齐。
center: 子元素在容器内居中对齐。
space-between: 子元素沿主轴均匀分布，第一个元素与容器起点对齐，最后一个元素与容器终点对齐。
space-around: 子元素沿主轴均匀分布，每个元素周围有相等的空间。
space-evenly：子元素沿主轴均匀分布，每个元素之间和周围的空间相等。

`align-items` 设置侧轴上的子元素排列方式（单行，子项不换行）

stretch：默认值，子元素沿侧轴拉伸以填充容器。
flex-start：子元素沿侧轴起点对齐。
flex-end：子元素沿侧轴终点对齐。
center：子元素在侧轴上居中对齐。
baseline：子元素沿基线对齐。

`align-content` 设置侧轴上的子元素的排列方式（多行，子项换行）

stretch：默认值，子元素沿侧轴拉伸以填充容器。
flex-start：子元素沿侧轴起点对齐。
flex-end：子元素沿侧轴终点对齐。
center：子元素在侧轴上居中对齐。
space-between：子元素沿侧轴均匀分布，第一行子元素与容器起点对齐，最后一行子元素与容器终点对齐，行与行之间相等的空间。
space-around：子元素沿侧轴均匀分布，每一行周围有相等的空间。
space-evenly：子元素沿侧轴均匀分布，每一行之间和周围的空间相等。

子项设置

`flex` 属性定义子项目分配剩余空间，用 flex 来表示占多少份数

flex 属性用于定义子项目分配剩余空间的比例，它是 flex-grow，flex-shrink 和 flex-basis 这三个属性的缩写。其中：

flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink：定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis：定义项目在分配多余空间之前，占据的主轴空间（主轴方向的大小），默认值为 auto，即元素本来的大小。

`align-self` 控制子项自己在侧轴上的排列方式

align-self 属性用于控制子项自己在侧轴上的排列方式，它可以覆盖父容器的 align-items 属性。常用的配置如下：

auto：默认值，继承父容器的 align-items 属性。
stretch：子项沿侧轴拉伸以填充容器。
flex-start：子项沿侧轴起点对齐。
flex-end：子项沿侧轴终点对齐。
center：子项在侧轴上居中对齐。
baseline：子项沿基线对齐。

`order` 属性定义项目的排列顺序

order 属性接受整数值，负数值和小数值。默认值为 0。值越小，项目排列越靠前，值越大，项目排列越靠后。如果两个项目的 order 值相同，则它们按照它们在源代码中出现的顺序排列。

图解 FLEXBOX

References

弹性盒子
 A Complete Guide to Flexbox
超级有趣的小游戏：FLEXBOX FROGGY
Learn Flexbox
CSS3-flex 布局

简介