display: flex; // 用于开启弹性布局在开始flex弹性布局的学习之前，我们需要先来了解这样几个概念：
- 弹性容器
- 弹性项目
- 主轴
- 交叉轴
目录
1.弹性容器
定义：给谁设置了display: flex; 谁就是弹性容器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.box1 {
background-color: red;
display: flex;/* 开启弹性布局，成为弹性容器 */
width: 100px; height: 100px;/* 独占一行，可设置宽高 */
}
.box2 {
background-color: blue;
display: flex;/* 开启弹性布局，成为弹性容器 */
width: 100px; height: 100px;/* 独占一行，可设置宽高 */
}
</style>
<title>flex弹性布局</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
有什么效果：弹性容器元素变成块级，独占一行，设置宽高有效
2.弹性项目
定义：弹性容器的亲儿子就是弹性项目
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.box {
background-color: red;
display: flex;
}
.first {
background-color: aquamarine;
width: 30px;height: 100px;/* 弹性项目设置宽高有效 */
margin: 16px;
}
</style>
<title>flex弹性布局</title>
</head>
<body>
<div class="box">
<span class="first"></span>
<span class="first"></span>
<span class="first"></span>
<span class="first"></span>
</div>
</body>
</html>
有什么效果：元素成为弹性项目后，非独占一行，失去原有的流体特性，可设置宽高，没有设置宽高时具有包裹性，可以定位，但是：
text-align、vertical-align、float、clear清除浮动对其无效
3.主轴
方向默认为水平，从左到右，具有方向性，有厚度（粗细）
4.交叉轴
有了主轴才有交叉轴的概念，交叉轴与主轴垂直，具有方向性，无厚度（粗细）
5.弹性设置
了解了这四种概念之后，现在我们可以来学学如何进行弹性布局
| 设置 | 值 | 说明 |
| 在弹性容器上可以附加的相关弹性布局设置（第一个为默认值） | ||
| flex-direction | row | row-reverse | column | column-reverse | 设置弹性容器内主轴方向 |
| flex-wrap | nowrap | wrap | wrap-reverse | 设置弹性容器内是否允许出现多根主轴 |
| flex-flow | row nowrap | 上面两个属性的任意组合 | 对上面两个属性的合并设置，用空格分隔 |
| justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | 设置弹性项目在主轴上的对齐方式 |
| align-items | stretch | flex-start | flex-end | center | 设置弹性项目在交叉轴方向上的对齐方式 |
| align-content | stretch | flex-start | flex-end | center space-between | space-around | space-evenly | 设置主轴（可以是一根，也可以是多根）在交叉轴方向上的对齐方式 |
| 在弹性项目上可以附加的相关弹性布局设置（第一个为默认值） | ||
| order | 任意正整数 | 设置弹性项目在其主轴上的摆放顺序 |
| align-self | inherit | stretch | flex-start | flex-end | center | 设置弹性项目在其主轴对应的交叉轴方向上的对齐方式 |
| flex-grow | 0 | 任意正整数 | 当主轴方向上有剩余空间时，弹性项目如何瓜分剩余空间 |
| flex-shrink | 1 | 任意正整数 | 当主轴方向上放不下弹性项目时，弹性项目如何缩放 |
| felx-basis | auto | 任意其他有效长度单位 | 设置弹性项目以什么值参与计算主轴剩余空间 |
| flex | 0 1 auto | 上述三个属性的任意组合 | 对上面三个属性的合并设置 |
6.交流
以上就是我所学习的弹性布局，如果有什么问题的话，可在下方留言。
另：祝前程似锦。
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
