🙅🏾‍♂️ Flexbox Sem Frescura

# Web 开发 # 编程 # 学习

**目录**

CSS Flexbox 简介什么是 Flexbox？有何好处？ Vantagens 的 Flexbox 布局模型

术语 Flex Container Flex Items Flex Lines Direções e Dimensionamento

显示 flex 的提示： display: flex; e 显示：inline-flex；展示中的差异介绍：弯曲； e 显示：inline-flex；乌索

Flex Direction Propriedades de Direção: Propriedades de Direção com Ordenamento Inverso: Uso

Flex Wrap Flex Wrap 属性：Uso

证明内容价值：Uso

对齐物品价值：Uso

Flex Grow 的功能：使用

Flex Shrink Como 功能：Uso

Flex Basis 详细信息：Uso

Propriedade Flex Valor padrão: Sintaxe: 详细信息: Uso

专有命令详细信息：Regras de ordenação：Uso

调整自我勇气 padrão: 价值：乌索

作者注

CSS Flexbox 简介

什么是 Flexbox？

CSS 灵活框布局模型（CSS 布局模型）是一种有效的布局模型：分发、分发和分发容器中的项目。

有什么好处？

允许在两个维度上进行布局。

元素的展示顺序与无编码顺序的独立顺序。

布局模型

在表中布局。

按块布局。

按线条布局。

布局位置。

Flexbox 的优点

O 布局灵活，可提供多种优势，例如：位置精确。能力和尺寸调整。调整符合必要条件的元素。主要灵活性没有设计。控制空间、内容和顺序。

术语

弹性容器

Flexbox 是一个布局模型，具有与特定属性相结合的功能。

最初的必需元素和 Flex 容器。为灵活的设计，容器可以显示专有的柔性或内联柔性。

弹性项目

Flex Items 的基本元素是 Flex Container 中的物品（filhos diretos）。

柔性线

Flex Container 的一些元素包括 são dispostos 和 alinhados em linhas flexíveis (Flex Lines)。

Um Flex Container Pode 具有多种功能。

方向和尺寸

作为应用程序的尺寸指示和术语，可以灵活地控制尺寸，从而可以控制配置和尺寸调整的各个元素。

显示类型 flex: display: flex; 和 display: inline-flex;

简介

USAR显示：柔性； ou 显示：inline-flex；转换元素是灵活的，这是使用 Flexbox 所需的主要属性。

使用附件、Flex 容器元素以及 Flex 物品的直接信息。

Flex Items 是 Flex Container 所需的待办事项或空间的专有属性。因此，无论是前部定义还是前部定义，都需要注意布局的相关性。

显示之间的差异：flex； e 显示：inline-flex；

display: flex;: Transforma o Flex Container em um elemento de bloco. Os Flex Items são dispostos em uma única Flex Line (linha flexível)。

display: inline-flex;: Transforma o Flex Container em um elemento inline.允许多个内联 Flex 组件同时使用，不同的显示方式：flex;。

乌索

代码：

/*Modulo 1/3 display-flex inline-flex/3-display-flex-inline-flex.html*/
.wrraper{
    padding: 1%;
    margin-top: 1em;
}

.container-flex, .container-inline-flex{
    background-color: #85d0bc;              
    border: 1px solid #028082;
    width: 30%;
    padding: 1%;
    margin: 0 auto;
    color: #028082;
}   

.container-flex{
    display: flex;
}

.container-inline-flex{
    display: inline-flex;
    background-color: #d0b285;              
    border: 1px solid #822b02;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/3%20display-flex%20inline-flex/3-display-flex-inline-flex.html

弹性方向

**Flex Direction** 是 CSS 的属性，它定义了容器 Flexível 的主要方向。存在两个主要原则，即容器的具体组成部分。任何主要的改变，都可以改变为灵活的属性。

总公司性质：

弯曲方向：行；使用 Flex-Direction: Row;，主要是在水平方向上定义 Flexíveis 和 Definido。可以自动调整整个容器的尺寸，缩小或符合需要。注意：flex-direction：row é o valor padrão。

弹性方向：列；使用 flex-direction:column;，或定义垂直方向。垂直放置时，需要将容器放置在较大的容器中。 Cada item se ajusta para ocupar a altura max disponível.

逆向方向属性：

弯曲方向：行反转； Semelhante ao row, mas com a order dos itens flexíveis invertida. O ultimo item ficará na primeira posição, e assim por diante.

弯曲方向：列反向； Semelhante ao column, mas com a order dos itens flexíveis invertida.最后，请按照以下方式组织部分下巴的活动。

乌索

代码：

/*
Modulo 1/4 flex direction/flex-direction.html
*/
.direction-row, .direction-column{
    display: flex;
    background-color: #85d0bc;              
    border: 1px solid #028082;
    width: 30%;
    padding: 1%;
    margin: 0 auto;
    color: #028082;
}   

.direction-column{
    flex-direction: column; 
    margin-bottom: 2em;
}

.direction-row{
    flex-direction: row;    
}

结果：没有第一列没有第二行

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/4%20flex%20direction/flex-direction.html

柔性包装

**flex-wrap** 是 CSS 的专有技术，它定义了容器的弹性容器的“quebrar”，它是新的链接或全部的空间或足够的空间。它阻碍了容器的扩展或改变，允许以灵活的方式重组。

Flex Wrap 的特性：

弹性包裹：包裹； Esta propriedade 定义了 que os itens podem quebrar 和 criar Novas linhas 或 colunas，respeitando seus valores originais de lagura 或 altura。它可以作为新的连接或符合需要的列来分配。

flex-wrap：反向包裹； Semelhante aowrapper，mas a ordem dos itens será invertida ao quebrar a linha。您可以组织新的连线或列的反转形式。

弹性包裹：现在包裹；请完全使用该属性并使用它，但请注意以下事项。它是一个永久性的永久容器，它是一个跨边界容器，但空间不够。

**注意**：Se os itens não couberem, o conteúdo transbordará do container flexível。

**观察**：“包裹”和使用的原则是水平方向，其方向是水平方向。垂直方向上的每个季节，垂直方向上的方向。

乌索

代码：

/*
Modulo 1/5  flex-wrap/flex-wrap.html
*/
.container {
    display: flex;
    background-color: #85d0bc;              
    border: 1px solid #028082;
    flex-direction: row;
    width: 30%;
    height: 600px;
    padding: 1%;
    margin: 0 auto;
    color: #028082;
}   
.item {
    background-color: #cdf6eb;
    border: 1px solid #028082;
    width: 100px;
    height: 200px;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/5%20%20flex-wrap/flex-wrap.html

调整内容

O **justify-content** 是 CSS 的专有属性，它是容器弹性的核心，也是主要的。在其他情况下，需要使用 **flex-wrap** 与水平方向的移动（或垂直方向相关）相结合。

值:

调整内容：居中； Alinha os itens flexíveis no centro do container, distribuindo or espaço igualmente a redor deles.

justify-content：flex-start； Alinha os itens flexíveis no início do container, com or espaço Restante sendo distribuído após o ultimo item.

调整内容：弹性结束； Alinha os itens flexíveis no Final do container, com o espaço Restante antes do primeiro item.

对齐内容：空间之间；在这些容器中分配灵活的空间，而不是在容器中提供额外的空间。

justify-content：空间周围； Coloca um espaço igual ao redor de cada item flexível, 包括作为容器的末端。

justify-content：空间均匀； Tenta 分发了所有其他内容和红色内容的空间，包括极端的内容。

**注意**：“flex-direction”定义为“column”，是“justify-content”的方向，主要是垂直方向，“row”方向和水平方向。

乌索

代码：

/*
Modulo 1/6  justify-content/justify-content.html
*/
.container {
    display: flex;
    background-color: #85d0bc;              
    border: 1px solid #028082;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 30%;
    height: 600px;
    margin: 0 auto;
    color: #028082;
}   
.item {
    background-color: #cdf6eb;
    border: 1px solid #028082;
    width: 100px;
    height: 200px;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/6%20%20justify-content/justify-content.html

对齐项目

CSS 的属性 **align-items** 与 alinhar 的响应一起，使容器的弹性不横向，或者不垂直，不垂直方向 **flex-direction** 设置为“行”（水平）配置，不设置水平方向 o **flex-direction** 设置为“列”配置（垂直的）。

值:

对齐项目：拉伸； Este é o valor padrão。 Faz com que os itens flexíveis se estiquem para ocupar toda a altura (ou largura, dependentendo da direção do eixo) do 容器。

对齐项目：居中； Alinha os itens flexíveis no centro do container ao longo do eixo transversal（垂直或水平，dependendo da direção do eixoprincipal）。

对齐项目：弹性开始； Alinha os itens no início do eixo transversal, ou seja, no topo docontainer (se o eixoprinciple for Horizontal) ou à esquerda (se o eixoprinciple forvertical)。

对齐项目：弯曲端； Alinha os itens no Final do eixo transversal, ou seja, na parte lower docontainer (se o eixoprincipal forhorizontal) ou à direita (se o eixoprinciple forvertical)。

对齐项目：基线；可以灵活地使用 CADA 项目文本的链接，并允许使用协奏曲的链接或连续的链接。

乌索

代码：

/*
Modulo 1/7  align-items/align-items.html
*/
.container {
    display: flex;
    background-color: #85d0bc;              
    border: 1px solid #028082;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    height: 600px;
    margin: 0 auto;
    color: #028082;
}   
.item {
    background-color: #cdf6eb;
    border: 1px solid #028082;
    width: 100px;
    height: 70px;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/7%20%20align-items/align-items.html

弹性成长

**flex-grow** 属性定义了容器弹性增长的因素。 Seu valor padrão é 0，对于padrão来说意义重大，os itens não crescem para ocupar o espaço disponível。 O **flex-grow** recebe apenas valores numéricos。

功能介绍：

使用连续公式计算渐进的因素：

Unidade de Crescimento = Espaço disponível / Somatória de todos os fatores de crescimento

Espaço disponível = Lagura do flex-container - Soma das larguras dos flex-items

计算方法是一种渐进式的计算方法，它是一种灵活的弹性体，可以在没有容器的情况下扩展预置空间。

乌索

代码：

/*
Modulo 1/9  flex-grow/flex-grow.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    width: 150px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

.item:nth-child(2){
    flex-grow: 4;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/9%20%20flex-grow/flex-grow.html

柔性收缩

**弹性收缩**是**弹性增长**的反面，决定了容器的弹性。 Seu valor padrão é 1，对于 padrão 来说意义重大，os itens podem encolher até largura do flex-container，se necessário。

功能介绍：

使用 **flex-grow** 的 mesma 公式进行计算：

Unidade de Encolhimento = Espaço disponível / Somatória de todos os fatores de encolhimento

Espaço disponível = Lagura do flex-container - Soma das larguras dos flex-items

一个统一的应用程序可用于调整容器布局的比例。

乌索

代码：

/*
Modulo 1/10  flex-shrink/flex-shrink.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    width: 200px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item:nth-child(even) {
    background-color: #a4ddce;
    flex-shrink: 6;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/10%20%20flex-shrink/flex-shrink.html

弹性基础

属性**弹性基础**定义了弹性项目的初始尺寸，它是一个较大的或一个较高的值，依赖于不同的方向。 Quando a direção do eixo está na Horizontal, adimensão alterada é alargura;它是垂直的，是一个不同的尺寸。

詳細信息：

医学统一：弯曲基础的价值和定义利用医学统一的价值、像素、比例、外部。

Valor padrão：O valor padrão de flex-basis é auto。自动配置是一种与弹性容器相当的项目尺寸。

零勇气：完全以零为基础的弹性基础，是一项初始尺寸，它是弹性增长的主要属性或定义。

主要内容：主要在弹性基础上定义尺寸的项目，如果没有定义尺寸的项目，则可以调整该尺寸。

宽度和高度之间的关系：弯曲基础和定义的值主要为零，因为宽度和高度的属性不一样。 Para que isso ocorra, o valor de flex-basis deve ser maior que zero.

限制最小宽度和最大宽度：可以根据最小宽度、最大宽度、最小高度和最大高度属性来限制弹性基础。弹性增长、弹性收缩和弹性基础的使用受到限制，仅供参考。

使用 com 包装：Quando flex-basis é utilizado juntamente com o 包装，se um item não couber na mesma linha que os outros，ele Será quebrado e ajustado para caber na nova linha。

乌索

flex-basis-largura-altura

代码：

/*
Modulo 1/11 flex-basis/11.1  flex-basis-largura-altura/flex-basis-largura-altura.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 550px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
    overflow: hidden;
    border-radius: 12%;
}
.item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cdf6eb;
    box-shadow: 0 0 12rem #fff;
    height: 150px;
    border-radius: 5%;
    margin-top: 20%;
    margin-right: 4px;
    flex-basis: 250px;
    flex-shrink: 0;
    animation: rotateItem 6s infinite;
}

结果：

flex-basis-auto

代码：

/*
Modulo 1/11 flex-basis/11.2 flex-basis-auto/flex-basis-auto.html
*/
.container {
    display: flex;
    flex-direction: column;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: auto;
}
.item:nth-child(even) {
    flex-grow: 1;
    background-color: #a4ddce;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/11%20flex-basis

flex-basis-zero

代码：

/*
Modulo 1/11 flex-basis/11.3 flex-basis-zero/flex-basis-zero.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

结果：

flex-basis-conteúdo-maior

代码：

/*
Modulo 1/11 flex-basis/11.4 flex-basis-conteúdo-maior/flex-basis-conteúdo-maior.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-basis: 1200px;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}
.item:nth-child(1) {
    flex-basis: auto;
}

结果：

弹性基础连续宽度高度

代码：

/*
Modulo 1/11 flex-basis/11.5 flex-basis-conteúdo-width-height/flex-basis-conteúdo-width-height.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
    flex-direction: row;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-basis: 200px;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

结果：

flex-basis-min-width

代码：

/*
Modulo 1/11 flex-basis/11.6 flex-basis-min-width/flex-basis-min-width.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-basis: 90px;
    min-width: 100px;
    flex-grow: 0;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

结果：

flex-basis-max-width

代码：

/*
Modulo 1/11 flex-basis/11.7 flex-basis-max-width/flex-basis-max-width.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-basis: 30%;
    flex-shrink: 0;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

结果： Adivinhe porque o item estourou o componente pai

flex-basis-wrap

代码：

/*
Modulo 1/11 flex-basis/11.8 flex-basis-wrap/flex-basis-wrap.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 400px;
    height: 160px;
    margin: 0 auto;
    color: #028082;
    flex-wrap: wrap;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 200px;
    flex-grow: 1
}
background-color: #a4ddce;
.item:nth-child(even) {
}

结果：

🔗 **主题示例资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/11%20flex-basis

灵活产权

**flex** 的属性是 Flexbox 属性声明的简化形式，例如 **flex-grow**、**flex-shrink** 和 **flex-basis**。 Ela 组合为 três em uma única declaração。

值得珍惜：

弹性：0 1 自动；

语法：

弹性：；

詳細信息：

Quando um Número é eSpecificado na propriedade de flex，ele 假定为后续含义：O número especificado 对应于 flex-grow 的价值。 flex-shrink 设置为 igual a 1。flex-basis 设置为 igual a 0。

Flexbox 的使用非常简单，允许声明共同财产的契约，并具有独特的勇气。

乌索

flex-valor-padrão

代码：

/*
Modulo 1/12 flex/12.1 flex-valor-padrão/flex-valor-padrão.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 2 100px;
}

结果： ![[Flexbox Sem Frescura-ex17.png]]

屈-勇-屈-不屈

代码：

/*
Modulo 1/12 flex/12.2 flex-valor-flexivel-inflexivel/flex-valor-flexivel-inflexivel.html
*/
.container {
    display: flex;
    background-color: #85d0bc;              
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}   
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
}

结果：

弹性值零

代码：

/*
Modulo 1/12 flex/12.3 flex-valor-zero/flex-valor-zero.html
*/
.container {
    display: flex;
    background-color: #85d0bc;
    border: 1px solid #028082;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    color: #028082;
}
.item {
    background-color: #cdf6eb;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}
.item:nth-child(3) {
    flex: 2;
}
.item:nth-child(4) {
    flex: 0;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/12%20flex/

所有权令

属性**顺序**定义了元素的顺序（它是灵活的），但不能改变 HTML 的顺序。 Ela afeta apenas 是视觉元素的配置。

詳細信息：

一个订单可以与数字的价值相同，也可以对视觉上的订单进行调整，以调整其价值。

O comportamento da order é o mesmo Independentemente da direção（行或列）。

订购规则：

0 之前的负数和正数。

O 数字 0 是负面数字和正面数字之间的一个数字。

正面数字 0 和负面数字。

乌索

代码：

/*
Modulo 1/13 order/order.html
*/
.item {
    background-color: #cdf6eb;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
    margin: 4px 8px;
}
.order_menosUm {
    order: -1;
}
.order {
    order: 0;
}
.order_1 {
    order: 1;
}
.order_2 {
    order: 2;
}
.order_3 {
    order: 3;
}

结果：

🔗 **资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/13%20order/order.html

自我对齐

**自我对齐**属性允许改变容器中的弹性物品的排列方式，以形成**对齐物品**的功能，并可以使用特定物品。

值得珍惜：

auto：项目序列或对齐项目容器的价值。

值:

自我对齐：拉伸；勇敢的帕德拉奥。该物品不是横向的，也不是横向的。

自我对齐：居中； Alinha o item no centro do eixo transversal（垂直或水平，dependendo da direção do eixoprincipal）。

自我对齐：弹性开始； Alinha o item no início do eixo transversal.

自我对齐：弯曲端； Alinha o 项目没有最终的 eixo 横向。

自我对齐：基线；该项目的基础是项目的基础知识。

乌索

对齐自身 eixo 主体

代码：

/*
Modulo 1/14 align-self/14.1 align-self-eixo-principal/align-self-eixo-principal.html
*/
.item {
    background-color: #cdf6eb;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
}
.item:nth-child(even) {
    background-color: #a4ddce;
}

.stretch {
    align-self: stretch;
}
.flex-start{
    align-self: flex-start;
}
.flex-end{
    align-self: flex-end;
}
.center{
    align-self: center;
}
.baseline{
    align-self: baseline;
    font-size: 5em;
}
.baseline-2{
    align-self: baseline;
}

结果：

对齐自身 eixo 横向

代码：

/*
Modulo 1/14 align-self/14.2 align-self-eixo-transversal/align-self-eixo-transversal.html
*/
.item {
    background-color: #cdf6eb;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1 1 auto;
}   
.item:nth-child(even) {
    background-color: #a4ddce;
}
.stretch {
    align-self: stretch;
}
.flex-start {
    align-self: flex-start;
}
.flex-end {
    align-self: flex-end;
}
.center {
    align-self: center;
}
.baseline {
    align-self: baseline;
}

结果：

🔗 **主题示例的资源**：https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/14%20align-self

作者注

如果您想使用“colinha”，请使用正常的名称或功能，以实现我们的目标。

Alguns 游戏与实践和 aprender 弹性盒：

https://flexboxfroggy.com/

https://mastery.games/flexboxzombies/

http://www.flexboxdefense.com/

官方文档、相关信息和互联网声音：https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox

https://media1.tenor.com/m/eO-C5L1ZkOoAAAAd/yoda-star-wars.gif

可以在水平方向上与布局网格的链接进行布局，使用的布局模型的原理是：

https://cssgridgarden.com/

https://codingfantasy.com/games/css-grid-attack/play

官方 MDN 网格

CLIS.CC

🙅🏾‍♂️ Flexbox Sem Frescura

CSS Flexbox 简介

什么是 Flexbox？

有什么好处？

布局模型

Flexbox 的优点

术语

弹性容器

弹性项目

柔性线

方向和尺寸

显示类型 flex: display: flex; 和 display: inline-flex;

简介

显示之间的差异：flex； e 显示：inline-flex；

乌索

弹性方向

总公司性质：

逆向方向属性：

乌索

柔性包装

Flex Wrap 的特性：

乌索

调整内容

值:

乌索

对齐项目

值:

乌索

弹性成长

功能介绍：

乌索

柔性收缩

功能介绍：

乌索

弹性基础

詳細信息：

乌索

flex-basis-largura-altura

flex-basis-auto

flex-basis-zero

flex-basis-conteúdo-maior

弹性基础连续宽度高度

flex-basis-min-width

flex-basis-max-width

flex-basis-wrap

灵活产权

值得珍惜：

语法：

詳細信息：

乌索

flex-valor-padrão

屈-勇-屈-不屈

弹性值零

所有权令

詳細信息：

订购规则：

乌索

自我对齐

值得珍惜：

值:

乌索

对齐自身 eixo 主体

对齐自身 eixo 横向

作者注