为什么需要学习Flex弹性布局呢？因为在HarmonyOS Next里面也有这个布局，如果是做后端开发的同学更需要了解下Css，这样在实际项目开发过程如果有静态页面需要你开发或者需要你调试时就可以应付自如。
Flex简介
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以通过display: flex;成为为Flex布局。 采用Flex布局的元素，被称为Flex容器flex container，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目，即：Flex item，简称“项目”。 容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
Flex布局是什么?
flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex布局不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
Flex基本概念
flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。
在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。
flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。
使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，称为flex项目（flex item），简称”项目”
容器默认存在两根主轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置（即边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-items | 指定 HTML 元素的盒子类型 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
fex-direction屏性
定弹性盒子内子元素的排列方向
| 值 | 描述 |
|---|---|
| row | 默认值，主轴沿水平方向从左到右 |
| row-reverse | 主轴沿水平方向从右到左 |
| column | 主轴沿垂直方向从上到下 |
| column-reverse | 主轴沿垂直方向从下到上 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承此属性的值 |
flex-direction 属性决定主轴的方向(即项目的排列方向)基本语法格式如下:
.box {
flex-direction:row|row-reverse |column | column-reverse;
}
它可能有4个值。 row(默认值):主抽为水平方向，起点在左端。 row-reverse:主轴为水平方向，起点在右端。 column:主轴为乘直方向，起点在上沿。 column-reverse:主轴为乘直方向，起点在下沿。
flex-wrap属性
flex-wrap属性 默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，如果一条轴线排不下，如何换行。基本语法格式如下:
.box{
f1ex-wrap: nowrapwrapwrap-reverse;
}
nowrap(默认):不换行。
wrap:换行，第一行在上方。
wrap-reverse:换行，第一行在下方。
nowrap(默认):不换行。
wrap:换行，第一行在上方。
wrap-reverse：换行，第一行在下方，排列方式效果如图
flex-flow属性
该属性作用于弹性盒容器，用于控制容器内元素的排列方向和换行方式，该属性是一个复合属性，由flex-direction和flex-wrap组成 flex-direction和flex-wrap的简写，默认row nowrap
.box{
flex-flow:<flex-direction><flex-wrap>;
}
justify-content属性
该属性作用于弹性盒容器内的子元素，用于控制该子元素自身在排列方向上的分布方式； justify-content属性定义了项目在主轴上的对齐方式 定义项目在主轴上的对齐方式。
.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}
该属性有5个值： ● flex-start（默认值）：左对齐； ● flex-end：右对齐； ● center：居中； ● space-between：两端对齐，项目之间的间隔都相等； ● space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍； 上述效果如下图所示：
align-items属性
该属性作用于弹性盒容器，用于控制弹性盒内所有子元素在排列方向的垂直方向上的对齐方式； 定义在交叉轴上的对齐方式 align-item属性定义项目在交叉轴上如何对齐
.box{
align-items:flex-start|flex-end|center|baseline|stretch;
}
该属性有5个值，具体的对齐方式与交叉轴的方向有关，假设交叉轴从上到下： ● flex-start：交叉轴的起点对齐； ● flex-end：交叉轴的中点对齐； ● center：交叉轴的中点对齐； ● baseline：项目的第一行文字的基线对齐； ● stretch（默认值）：如果项目未设置高度或设置为auto，将占满整个容器的高度； 上述效果如下图所示
align-content属性
定义多根轴线的对齐方式 Justify-content属性 justify-content属性定义了项目在主轴上的对齐方式 基本语法格式如下
.box {
justify-content:flex-start |flex-endcenter|space-between|space-around;
}
对齐方式与轴的方向有关，当主轴沿水平方向从左到右时，具体含义为:
<u1 style="background-color: #fsf5f5;">
<1i>flex-start(默认值):左对齐</1i>
<1i>f1ex-end:右对齐</1i>
<1i>center: 居中</1i>
<1i>space-between:两端对齐，项目之间的间
隔都相等。</1i>
<1i>space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</1i>
</u1>
项目的属性
order展性
order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下
- fex-grow属性
- flex-shrink属性
- flex-basis属性
- flex属性 flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下： ● flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0； ● flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1； ● flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。 另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。
flex:1 1 auto;
设置order效果 order: 1;
设置order效果 容器设置 align-items: flex-end; 子容器设置 align-self: flex-start;
- align-self属性
| 值 | 描述 |
|---|---|
| auto | 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch” |
| stretch | 项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
- 网格布局
- 百分比布局
- 圣杯布局流式布局
位置
布局+位置能搞定基本上大部分的布局 父相子绝 孩子绝对定位 父子是绝对定位 A position: relative; B position: absolute; 布局之前先看状态，不要着急立即布局
案例【仅供参考】
这种案例，我们需要有很情绪的布局思路，先通过UI图进行框组件，这样后续布局就很清晰了，类似我这样，每一块都标记出来，脑海中就很清晰怎么布局，使用什么组件了，那么做HarmonyOS Next鸿蒙开发的时候也是一样的原理。我通常会混搭，不会单一使用一种布局方式。
