请你学习：前端布局3 - flex

Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。​

Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。

• Flex容器（Flex Container）：采用Flex布局的元素，通过给该元素设置display属性的值为flex或inline-flex，来定义一个Flex容器。flex值表示该容器是一个块级元素，而inline-flex值表示该容器是一个行内元素。
• Flex项目（Flex Items）：Flex容器的所有子元素自动成为Flex项目。这意味着，在Flex布局中，你直接对容器的子元素进行布局、对齐和分配空间，而不是传统布局中可能需要的嵌套块级元素或行内元素。

在Flex布局中，确实存在两个主要的轴：主轴（main axis）和交叉轴（cross axis），但它们的方向并不总是水平轴和垂直轴，这取决于flex-direction属性的设置。

• 主轴（Main Axis）：这是Flex容器的主方向轴，Flex项目将沿着这条轴进行排列和尺寸调整。默认情况下，如果flex-direction的值为row（默认值），那么主轴就是水平轴，从左到右排列项目。但是，如果flex-direction被设置为column，那么主轴就变成垂直轴，从上到下排列项目。

• 交叉轴（Cross Axis）：这是与主轴垂直的轴，Flex项目在交叉轴上的尺寸和对齐方式由交叉轴相关的属性控制（如align-items和align-self）。如果主轴是水平轴，那么交叉轴就是垂直轴；如果主轴是垂直轴，那么交叉轴就是水平轴。

因此，说“项目默认沿主轴排列（水平轴）”并不完全准确，因为主轴的方向可以是水平的也可以是垂直的，这取决于flex-direction的设置。默认情况下，由于flex-direction是row，所以主轴是水平的，项目沿水平轴从左到右排列。但是，一旦改变了flex-direction的值，主轴的方向和项目的排列方向也会相应改变。

• 主轴（Main Axis）
  • 定义：Flex父元素的主轴是子元素布局的主要方向轴。这个方向决定了Flex项目（子元素）如何排列。
  • 确定方向：主轴的方向由flex-direction属性确定。默认值为row，表示主轴是水平方向，从左到右排列项目。如果flex-direction被设置为column，则主轴变为垂直方向，从上到下排列项目。
  • 主尺寸（Main Size）：Flex项目在主轴上占据的空间大小称为主尺寸。这通常与项目的宽度（对于水平主轴）或高度（对于垂直主轴）相关。
• 主轴的开始与结束（Main-start & Main-end）
  • 定义：main-start和main-end分别表示主轴的开始和结束位置。Flex项目将沿着主轴从main-start到main-end进行排列。
  • 位置关系：对于水平主轴（flex-direction: row），main-start通常位于容器的左侧，main-end位于右侧。对于垂直主轴（flex-direction: column），main-start位于容器的顶部，main-end位于底部。
• 交叉轴（Cross Axis）
  • 定义：交叉轴是垂直于主轴的轴。它的方向由主轴的方向决定。
  • 作用：交叉轴主要用于控制Flex项目在主轴方向之外的对齐和尺寸。
• 交叉轴的开始与结束（Cross-start & Cross-end）
  • 定义：cross-start和cross-end分别表示交叉轴的开始和结束位置。Flex项目在交叉轴上的排列虽然不如主轴上那么直接，但这些位置仍然对项目的对齐和尺寸有重要影响。
  • 位置关系：对于水平主轴（flex-direction: row），交叉轴是垂直的，cross-start位于容器的顶部，cross-end位于底部。对于垂直主轴（flex-direction: column），交叉轴是水平的，cross-start位于容器的左侧，cross-end位于右侧。
• 交叉尺寸（Cross Size）
  • 定义：交叉尺寸是指Flex项目在交叉轴方向上占据的空间大小。
  • 影响因素：交叉尺寸的大小可能受到Flex项目自身的尺寸属性（如width、height）、Flex容器的对齐属性（如align-items）、以及Flex项目的align-self属性等因素的影响。

1 在使用Flex布局时，首先需要给父元素（即容器）指定为Flex布局

给父元素指定为Flex布局通常是通过设置该元素的display属性为flex（表示块级Flex容器）或inline-flex（表示行内Flex容器）来实现的。默认情况下，如果不特别指定，display: flex; 会被设置为块级Flex容器。

<div class="container"></div>
.container {
    display: flex | inline-flex;
}

如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;

父元素（容器）可以设置以下六个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction 属性用于定义 Flex 容器中项目的排列方向，它决定了主轴的方向。这个属性有四个可能的值，每个值都对应着不同的排列方式：

1. flex-direction: row;：

   • 这是默认值。
   • Flex 项目将沿着水平主轴从左到右排列。
   • 主轴的起点位于容器的左边缘。
   • 交叉轴是垂直的。
     

2. flex-direction: row-reverse;：

   • Flex 项目将沿着水平主轴从右到左排列。
   • 主轴的起点位于容器的右边缘。
   • 交叉轴仍然是垂直的，与row方向相反。
     

3. flex-direction: column;：

   • Flex 项目将沿着垂直主轴从上到下排列。
   • 主轴的起点位于容器的上边缘。
   • 交叉轴现在是水平的。
     

4. flex-direction: column-reverse;：

   • Flex 项目将沿着垂直主轴从下到上排列。
   • 主轴的起点位于容器的下边缘。
   • 交叉轴是水平的，与column方向相反。
     

   通过调整 flex-direction 的值，您可以灵活地控制 Flex 容器内部项目的排列方式，以适应不同的布局需求。这个属性是 Flex 布局中非常基础和重要的一个属性，因为它直接决定了项目的排列方向和主轴的方向。

flex-wrap 属性用于指定 Flex 容器中的项目是否可以在必要时换行到下一行。这个属性有三个值，每个值都定义了不同的换行行为：

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

1. flex-wrap: nowrap;：

   • 这是默认值。

   • Flex 项目将在一行内显示，不会换行。

   • 如果容器的宽度不足以容纳所有项目，则项目会根据 flex-shrink 属性的值缩小，以尝试适应容器宽度。
     
     

   • 如果项目无法进一步缩小以适应容器，或者容器设置了固定的宽度，则项目可能会溢出容器。
     min-width:
     
     

2. flex-wrap: wrap;：

   • Flex 项目将在必要时换行到下一行。
   • 换行后的第一行将位于容器的顶部（即主轴的起点方向）。
   • 如果有足够的空间，后续的行将堆叠在上一行的下方。
   • 这允许容器根据项目的数量和尺寸自动调整高度（对于水平主轴）或宽度（对于垂直主轴）。
     

3. flex-wrap: wrap-reverse;：

   • Flex 项目同样会在必要时换行，但与 wrap 不同的是，第一行将位于容器的底部（或主轴的结束方向）。
   • 这意味着换行后的行将堆叠在容器的底部，并且向上堆叠（对于水平主轴）或向左堆叠（对于垂直主轴）。
   • 这允许实现一些特殊的布局效果，如底部对齐的卡片列表或垂直堆叠的列。
     

   通过调整 flex-wrap 的值，您可以控制 Flex 容器内项目的换行行为，从而创建更加灵活和适应性强的布局。

justify-content 属性用于定义 Flex 容器中的项目在主轴上的对齐方式。这个属性有五个值，每个值都提供了不同的对齐方式，这里以水平方向为主轴（即 flex-direction: row;）进行说明：

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

1. justify-content: flex-start;：

   • 默认值。
   • 项目在主轴上向一端的对齐，具体来说是左对齐（如果主轴是水平的）。
   • 项目之间的间隔是它们各自占用的空间。
     

2. justify-content: flex-end;：

   • 项目在主轴上向另一端的对齐，具体来说是右对齐（如果主轴是水平的）。
   • 类似于 flex-start，但项目是在主轴的另一端对齐。
     

3. justify-content: center;：

   • 项目在主轴上居中对齐。
   • 如果容器有足够的空间，项目将均匀分布在主轴的中间位置。
     

4. justify-content: space-between;：

   • 项目之间的间隔相等，且项目在主轴的两端对齐。
   • 第一个项目与容器的开始边界贴合，最后一个项目与容器的结束边界贴合，剩余的空间在其余项目之间平均分配。
     

5. justify-content: space-around;：

   • 每个项目两侧的间隔相等。
   • 因此，项目之间的间隔比项目与容器边界的间隔大一倍。
   • 这导致第一个项目前的空间和最后一个项目后的空间是项目之间间隔的一半。
     

align-items 属性定义了 Flex 容器中的项目在交叉轴上的对齐方式。当容器的 flex-direction 设置为 row 时，交叉轴是垂直的（即垂直于主轴）。以下是 align-items 属性的五个可能值及其效果：

1. align-items: flex-start;

   • 项目在交叉轴的起点对齐（顶部或左边，取决于主轴的方向，但在这里我们假设主轴是水平的，所以是顶部）。
   • 如果容器的高度设置为 100px，而项目的高度分别为 20px、40px、60px、80px、100px，则所有项目的顶部都会对齐在容器的顶部，且项目之间不会有额外的垂直间隔（除非有额外的CSS规则或Flex容器的其他属性导致间隔）。
     

2. align-items: flex-end;

   • 项目在交叉轴的终点对齐（底部或右边）。
   • 同样地，如果容器的高度为 100px，而项目的高度各异，则所有项目的底部都会对齐在容器的底部，导致较短的项目在顶部有额外的空间。
     

3. align-items: center;

   • 项目在交叉轴的中点对齐。
   • 如果容器的高度为 100px，无论项目的高度如何，它们都会以容器的中心点为基准垂直居中对齐。
     

4. align-items: baseline;

   • 项目的基线对齐。这通常意味着文本的基线将对齐，但如果项目中有不同的对齐方式（例如，有些项目包含文本，有些则不包含），则效果可能不如预期。
   • 注意，baseline 对齐并不总是意味着所有项目的底部都会在同一水平线上，而是依赖于项目的具体内容和对齐方式。
     

5. align-items: stretch;（默认值）

   • 如果项目未设置高度或高度设置为 auto，则项目将被拉伸以填充整个容器的交叉轴长度。
     

   • 如果容器的高度为 100px，且所有项目都没有设置高度或高度设置为 auto，则所有项目都将被拉伸到 100px 高。但是，如果项目设置了最小高度（min-height）或最大高度（max-height），则这些值可能会限制拉伸的程度。

未完待续。。。