1. ¿Qué es el diseño flexible?

Flex es la abreviatura de Flexible Box flex layout significa diseño flexible, que puede proporcionar la máxima flexibilidad para el modelo de caja.

2. Mire la imagen a continuación, es muy importante, es la base del aprendizaje de diseño Flex (de csdn)

El diseño flexible contiene dos componentes importantes, uno es el contenedor y el otro es la propiedad. El contenedor tiene dos ejes por defecto: el eje principal horizontal (eje principal) y el eje transversal vertical (eje transversal). La posición inicial del eje principal (la intersección con el borde) se denomina inicio principal y la posición final se denomina final principal; la posición inicial del eje transversal se denomina inicio transversal y la posición final se denomina final transversal. Los elementos se organizan a lo largo del eje principal de forma predeterminada. El espacio del eje principal ocupado por un solo elemento se denomina tamaño principal, y el espacio del eje transversal ocupado por este se denomina tamaño transversal. (en la foto de arriba).

3. Configuración del contenedor

flex-direction La dirección del eje principal (la dirección en la que se organizan los elementos)

1. fila (valor predeterminado): el eje principal es horizontal y el punto de inicio está en el extremo izquierdo.
2.row-reverse: el eje principal es la dirección horizontal y el punto de inicio está en el extremo derecho.
3. columna: el eje principal es la dirección vertical y el punto de inicio está en el borde superior.
4. columna inversa: el eje principal es la dirección vertical y el punto de inicio está en el borde inferior.

2. envoltura flexible

1.nowrap (predeterminado, sin salto de línea)
2.wrap (salto de línea)
3.wrap-reverse (nueva línea, la primera línea está debajo)

3. flujo flexible

Esta propiedad es un patrón abreviado para las dos propiedades anteriores.
Predeterminado: flujo flexible, fila-ahora

4.justify-content (define la alineación del elemento en el eje principal)

1. Flex-start (alineación izquierda)
2.flex-eng (alineación derecha)
3.centro (centro)
4. espacio entre (alinear ambos extremos, el intervalo entre elementos es igual)
5. espacio alrededor (espaciado igual en ambos lados de cada elemento. Por lo tanto, el espacio entre los elementos es el doble del espacio entre los elementos y el borde)

5.align-items (define cómo se alinean los elementos en el eje transversal)

1.flexflex-start Se alinea el punto inicial del eje transversal.
2. El punto final del eje transversal del extremo flexible está alineado.
3.centro El punto medio del eje transversal está alineado.
4.baseline La alineación de la línea de base de la primera línea de texto del elemento.
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.代码实战

空口无凭不如代码说话，接下来来看看这张图片的代码过程 Captura de pantalla 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布局，是一个很好的入门基础训练，建议浏览。 Captura de pantalla 2022-04-11 163329.png

7.总结

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

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

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

本文章部分来源链接

Little Frog Homecoming: aprendizaje de diseño flexible