目录
- 一、简介
- 二、父元素属性
- 2.1、flex-direction
- 2.2、justify-content
- 2.3、align-items
- 2.4、flex-wrap
- 2.5、flex-flow
- 2.6、align-content
- 三、子元素属性
- 3.1、flex
- 3.2、align-self
- 3.3、order
一、简介
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。本文中源码，并不是每次都一样，会有一些区别，比如有时没有宽度等，不要一直在一个源码上改，没有特别说明都是一个属性对一个源码。
还有就是本文说得 Flex布局的属性都是常见属性，并不是只有这些，如果想学更多属性，可以参考官网，或者其他学习网站。
二、父元素属性
2.1、flex-direction
flex-direction 顺序指定了弹性子元素在父容器中的位置，flex-direction的值有:
flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 400px;
height: 300px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
padding: 10px; /* 内边距容易观察 */
display: flex; /* 启用 Flex 布局 */
/* flex-direction的取值可以为: row | row-reverse | column | column-reverse */
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
.flex-item {
width: 60px;
height: 60px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
</div>
</body>
</html>
结果图如下：
2.2、justify-content
属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- flex-start：默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐
- flex-end：Flex 子项在主轴上与 Flex 容器的末尾位置对齐
- center：Flex 子项在主轴上居中对齐
- space-between：Flex 子项沿主轴均匀分布，首尾两端不留间隙
- space-around：Flex 子项沿主轴均匀分布，两侧留有相等的间隙
- space-evenly: Flex 子项沿主轴均匀分布，包括首尾两端和子项之间都留有相等的间隙
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
margin: 0 auto; /* 水平居中 */
width: 400px;
height: 300px;
background-color: lightblue;
display: flex;
flex-direction: row;
/* justify-content的取值可以为：flex-start | flex-end | center | space-between | space-around |space-evenly */
/* 默认值 flex-start*/
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}
.flex-item {
width: 60px;
height: 60px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
</div>
</body>
</html>
当 flex-direction: row 结果图如下：
在上面的源码基础上，设置 flex-direction: column 结果图如下：
2.3、align-items
属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值：
align-items: stretch | flex-start | flex-end | center | baseline
- stretch（默认值）：拉伸子项以填满整个交叉轴的空间
- flex-start：子项在交叉轴的起点对齐
- flex-end：子项在交叉轴的末端对齐
- center：子项在交叉轴上居中对齐
- baseline：子项根据它们的基线（如果有）对齐
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
margin: 0 auto; /* 水平居中 */
width: 400px;
height: 300px;
background-color: lightblue;
display: flex;
flex-direction: row;
/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */
align-items: flex-start;
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
/* 默认值 stretch */
/* align-items: stretch; */ /* 子元素不能有高度 */
}
.flex-item {
width: 60px;
height: 60px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
.special-item{
height: 120px; /* 会覆盖上面的高度 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item special-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item special-item">item 4</div>
</div>
</body>
</html>
结果图如下：
当 align-items: stretch 时，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 400px;
height: 300px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */
/* 默认值 stretch */
align-items: stretch; /* 子元素不能有高度 */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}
.flex-item {
width: 60px;
/* height: 60px; */ /* 当为stretch时去除掉高度 */
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
</div>
</body>
</html>
结果图如下：
当 align-items: baseline 时，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 400px;
height: 300px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */
/* 默认值 stretch */
/* align-items: stretch; */ /* 子元素不能有高度 */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
align-items: baseline; /* 按照项目内的文字对齐 */
}
.flex-item {
width: 60px;
height: 60px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
.special-item{
height: 120px; /* 会覆盖上面的高度 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" style="padding-top: 20px;">item 1</div> <!-- 加了内边距演示 -->
<div class="flex-item special-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item special-item">item 4</div>
</div>
</body>
</html>
结果图如下：
2.4、flex-wrap
在 Flex 布局中，flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:
flex-wrap: nowrap | wrap | wrap-reverse
- nowrap（默认值）：不换行，所有 Flex 子项会尽量排在一行内
- wrap：允许 Flex 子项在需要时换行，第一行在上方，紧接着的行在下方
- wrap-reverse：允许 Flex 子项在需要时换行，第一行在下方，紧接着的行在上方
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 500px;
height: 400px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
/* flex-wrap的取值可以为：nowrap | wrap | wrap-reverse */
/* 默认值 nowrap */
flex-wrap: nowrap;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}
.flex-item {
width: 100px;
height: 60px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
<div class="flex-item">item 7</div>
</div>
</body>
</html>
结果图如下：
2.5、flex-flow
flex-flow 是一个缩写属性，结合了 flex-direction 和 flex-wrap 两个属性，用于同时设置 Flex 容器的主轴方向和子项的换行方式，flex-flow 属性的语法格式如下：
flex-flow: <flex-direction> <flex-wrap>;
这里 flex-direction、flex-wrap就是我们上面提到的取值，随意组合。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 500px;
height: 400px;
margin: 0 auto; /* 水平居中 */
background-color: lightblue;
display: flex;
/* flex-flow的取值可以为：flex-direction 和 flex-wrap 的组合属性 */
flex-flow: row wrap;
/* flex-flow: column wrap; */
}
.flex-item {
width: 100px;
height: 100px;
border: 1px solid black; /*加个边框*/
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
<div class="flex-item">item 7</div>
<div class="flex-item">item 8</div>
<div class="flex-item">item 9</div>
<div class="flex-item">item 10</div>
</div>
</body>
</html>
结果图如下：
2.6、align-content
align-content 属性用于控制多根轴线（Flex 容器内部的行或列）在交叉轴上的对齐方式，当有多根轴线时才会生效。它可以设置的属性值有：
align-content：stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
- stretch：默认值。轴线占满整个交叉轴，如果子项没有设置高度，将被拉伸至与容器相同的高度
- flex-start：多根轴线在交叉轴的起始位置对齐
- flex-end：多根轴线在交叉轴的末端位置对齐
- center：多根轴线在交叉轴上居中对齐
- space-between：轴线均匀分布在交叉轴上，首尾两根轴线与容器边框对齐，轴线之间间隔相等
- space-around：轴线均匀分布在交叉轴上，轴线两侧的间隔是轴线之间间隔的一半
- space-evenly：轴线均匀分布在交叉轴上，包括轴线两侧和轴线之间的间隔均相等
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
margin: 0 auto; /* 水平居中 */
width: 500px;
height: 500px;
background-color: lightblue;
display: flex;
flex-direction: row;
flex-wrap: wrap; /* align-content得多行还有效果，所以设置换行 */
/* align-content的取值可以为：stretch | center | flex-start | flex-end | space-between | space-around | space-evenly */
/* 默认值 */
/* align-content: stretch; */
align-content: flex-start;
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}
.flex-item {
width: 100px;
height: 100px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
<div class="flex-item">item 7</div>
<div class="flex-item">item 8</div>
<div class="flex-item">item 9</div>
<div class="flex-item">item 10</div>
</div>
</body>
</html>
结果图如下：
当 align-content: stretch 时示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 500px;
height: 500px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
flex-wrap: wrap; /* align-content得多行还有效果，所以设置换行 */
/* align-content的取值可以为：stretch|center|flex-start|flex-end|space-between|space-around|space-evenly */
/* 默认值 stretch*/
align-content: stretch;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}
.flex-item {
width: 100px;
/* height: 100px; */ /* stretch使用时子元素不能有高度 */
border: 1px solid black; /*加个边框*/
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
<div class="flex-item">item 7</div>
<div class="flex-item">item 8</div>
<div class="flex-item">item 9</div>
<div class="flex-item">item 10</div>
</div>
</body>
</html>
结果图如下：
三、子元素属性
3.1、flex
在 CSS 的 Flex 布局中，flex 属性是一个复合属性，用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值，分别是：
flex：flex-grow | flex-shrink | flex-basis
- flex-grow：定义 Flex 项目的放大比例，默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例，如果为 0，则不放大。
- flex-shrink：定义 Flex 项目的收缩比例，默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例，如果为 0，则不收缩。
- flex-basis：定义了 Flex 项目在分配多余空间之前，所占据的空间大小，默认值为 auto。可以设置为具体的长度值或百分比，也可以设置为 content、auto 等。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 500px;
height: 500px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
}
.flex-item {
width: 80px;
height: 80px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
</div>
</body>
</html>
结果图如下：
3.2、align-self
align-self 属性用于覆盖 Flex 容器的 align-items 属性，单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目，控制该项目在交叉轴上的对齐方式。
align-self：stretch | center | flex-start | flex-end | baseline | auto
- auto：使用父元素（即 Flex 容器）的 align-items 值。
- flex-start：项目向交叉轴起始位置对齐。
- flex-end：项目向交叉轴末端位置对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目根据它们的基线对齐。
- stretch：项目被拉伸以适应交叉轴。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
display: -webkit-flex;
/*webkit内核的浏览器*/
margin: 0 auto; /* 水平居中 */
width: 500px;
height: 500px;
background-color: lightblue;
display: flex;
flex-direction: row;
align-items: flex-start;
/* align-self的取值可以为：stretch | center | flex-start | flex-end | baseline | auto */
/* 默认值 */
/* align-self: stretch; */
align-self: flex-start;
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: stretch; */
/* align-self: baseline; */
}
.flex-item {
width: 80px;
height: 80px;
border: 1px solid black; /*加个边框*/
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item" style="align-self: center;">item 2</div>
<div class="flex-item" style="align-self: flex-end;">item 3</div>
<div class="flex-item">item 4</div>
</div>
</body>
</html>
结果图如下：
3.3、order
在 Flex 布局中，order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序，值为整数，可以是正数、负数或零。
默认情况下，Flex 项目的 order 属性值为 0，表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时，数值小的项目将优先排在前面，数值大的项目排在后面。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.flex-container {
width: 500px;
height: 500px;
background-color: lightblue;
margin: 0 auto; /* 水平居中 */
display: flex;
flex-direction: row;
}
.flex-item {
width: 80px;
height: 80px;
border: 1px solid black; /* 加个边框 */
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item" style="order: 3;">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item" style="order: -1;">item 4</div>
</div>
</body>
</html>
事例图：
