1. Was ist Flex-Layout?

Flex ist die Abkürzung für Flexible Box flex layout steht für flexibles Layout, das maximale Flexibilität für das Boxmodell bieten kann.

2. Schauen Sie sich das Bild unten an, es ist sehr wichtig, es ist die Grundlage für das Flex-Layout-Lernen (von csdn)

Das Flex-Layout enthält zwei wichtige Komponenten, eine ist der Container und die andere die Eigenschaft. Der Container hat standardmäßig zwei Achsen: die horizontale Hauptachse (Hauptachse) und die vertikale Querachse (Querachse). Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart und die Endposition als Hauptende bezeichnet; die Startposition der Querachse wird als Querstart und die Endposition als Querende bezeichnet. Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird als Hauptgröße bezeichnet, und der von ihm eingenommene Querachsenraum wird als Quergröße bezeichnet. (Bild oben).

3. Containereinstellungen

flex-direction Die Richtung der Hauptachse (die Richtung, in der die Elemente angeordnet sind)

1. Reihe (Standardwert): Die Hauptachse ist horizontal, und der Startpunkt ist am linken Ende.
2.row-reverse: Die Hauptachse ist die horizontale Richtung, und der Startpunkt ist am rechten Ende.
3. Spalte: Die Hauptachse ist die vertikale Richtung, und der Startpunkt ist am oberen Rand.
4.column-reverse: Die Hauptachse ist die vertikale Richtung, und der Startpunkt ist am unteren Rand.

2.flex-wrap

1.nowrap (Standard, kein Zeilenumbruch)
2. Zeilenumbruch (Zeilenumbruch)
3.wrap-reverse (neue Zeile, die erste Zeile ist unten)

3.Flex-Flow

Diese Eigenschaft ist ein Kurzmuster für die beiden oben genannten Eigenschaften
Standard: flex-flow, row-nowrap

4.justify-content (definiert die Ausrichtung des Items auf der Hauptachse)

1. Flex-Start (linke Ausrichtung)
2.flex-eng (rechte Ausrichtung)
3.center (Mitte)
4.space-between (beide Enden ausrichten, das Intervall zwischen den Elementen ist gleich)
5.space-around (Gleicher Abstand auf beiden Seiten jedes Elements. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand)

5.align-items (definiert, wie Items auf der Querachse ausgerichtet werden)

1.flexflex-start Der Startpunkt der Querachse wird ausgerichtet.
2. Der Endpunkt der Flex-End-Querachse wird ausgerichtet.
3.center Der Mittelpunkt der Querachse wird ausgerichtet.
4.baseline Die Grundlinienausrichtung der ersten Textzeile des Elements.
5.stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content(多根轴线的对齐方式，一根轴该属性无效)

1.flex-start 与交叉轴的起点对齐。
2.flex-end 与交叉轴的终点对齐。
3.center 与交叉轴的中点对齐。
4.space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
5.space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6.stretch（默认值）轴线占满整个交叉轴。

4.属性设置

1.order

定义项目的排列顺序，数字越小，排列越靠前，默认为零

2.flex-grow

定义项目的放大比例，默认为0，默认情况下即使有剩余空间项目也不会放大。缩放的方向为flex-direction的方向。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink

1.定义项目的缩小比例，默认为1，空间不足时，该项目会缩小。其值为0表示不缩小.缩放的方向为flex-direction的方向。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
2.负值对该属性无效。

4.flex

1.flex-grow,flex-shrink和flex-basis的简写该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
2.建议优先使用这个属性而不分开写，浏览器会推算相关值。
3.grow表示伸张因子，shrink表示是收缩因子。
4.grow在flex容器下的子元素的宽度和比容器小的时候起作用。
5.grow定义了子元素的宽度增长因子，除去子元素之和剩下的宽度会按照各个子元素的gorw值进行平分加大各个子元素上。
6.计算容器还剩空间：available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)
7.计算增长单位：grow_unit(增长单位)=available_space/flex_grow_total(子元素增长因子之和)
8.得到子元素的宽度：flex-item-width(子元素计算得到的宽度)=flex-basis+grow-unit*flex-grow

5.align-self

1.该属性允许单个项目与其他项目不同的对齐方式，可覆盖align-items的属性值。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则为stretch。
2.auto | flex-start | flex-end | center | baseline | stretch;该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

5.代码实战

空口无凭不如代码说话，接下来来看看这张图片的代码过程 Screenshot 2022-04-11 152613.png

先来看看他的page html结构
注意：这里用了BEM国际命名规范哦
BEM详情请见[你知道BEM，你每次都用吗？ - 掘金 (juejin.cn)](url)

        <div class="page__hd">
            <div class="page__title">Flex</div>
            <div class="page__desc">Flex布局</div>
        </div>
        <!-- BEM -->
        <div class="page_bd page__bd_spacing">
            <!-- weui 项目前缀，弹性布局组件 新一轮的BEM-->
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>
            </div>    
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>               
            </div>            
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">weui</div>
                </div>
            </div>   
            <div class="page__ft">
                <!-- 行内样式，不要这么写 优先级更高 -->
                <a href="javascript:home()" style="color:white;">
                    <!-- img 标签 也会发出HTTP请求
                    127.0.0.1 IP
                    png 属于微信的
                    可给可不给
                    403 forbidden
                    保护自己站点的资源，同时减少一些无效的请求
                -->
                    <img src="./icon_footer_link.png" alt="">                   
                </a>
            </div>
        </div>  
复制代码

css代码：

* {
    margin: 0;
    padding: 0;
    /* outline: 1px solid green; */
}
/* css4变量 */
:root{
    --weui-FG-1:rgba(255,255,255,0.5);
    --weui-BG-0:green;
    --weui-BG-1:#1e1e1e;
}
body, html {
    height: 100%;
}
body {
    /* 手机网页  apple-system */
    /* css 继承 */
    font-family: -apple-system-font, sans-serif;
    background-color: var(--weui-BG-0);
    color: rgba(255, 255, 255, 0.8);
}
.page {
    position: absolute; /* 格式化上下文   绝对定位， 脱离了文档流 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto; /*内部滚动*/
    -webkit-overflow-scrolling: touch; 
}
.page__hd {
    padding: 40px;
}
.page__title {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}
.page__desc {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    font-size: 14px;
}
.page__bd_spacing {
    padding: 0 16px;
}
.page__ft {
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
}
.page__ft img {
    height: 19px;
    filter: invert(100) hue-rotate(170deg);
}
/* css 格式上下文的概念 
flex 可以阶段移动端大部分布局的需求  */
.weui-flex {
    /* 解决兼容性问题
        flex 实验室阶段 W3C 
        chrome 先支持  -webkit-flex 今早支持
        -webkit 前缀 
    */
    display: -webkit-box;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}
.weui-flex__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.weui-flex__item .placeholder {
    text-align: center;
    margin: 5px;
    padding: 0 10px;
    /* font-size: 10px; */
    background-color: var(--weui-BG-1);
    height: 2.3em; /* 相对于自身字体大小 */
    line-height: 2.3;
    color:var(--weui-FG-1);
}
复制代码

6.flex学习推荐

flexboxfroggy.com/ 该游戏通过让小青蛙回到对应的荷叶上来让人们学习flex布局，是一个很好的入门基础训练，建议浏览。 Screenshot 2022-04-11 163329.png

7.总结

容器可以理解为是项目的父元素。项目可以是块级元素，也可以是行内元素
容器和项目六大属性：

我们可以用容器属性控制项目的:方向、轴线转折方向、主轴对齐方式、交叉轴对齐方式、多根轴对齐方式

用项目属性控制：排列顺序、放大比例、缩小比例、默认项目本身大小、单个项目的对齐方式

本文章部分来源链接

Little Frog Homecoming: Flex-Layout-Lernen