1.基础和术语

CSS Flex布局模块，也称为flexbox，是一种高效地设计和构建响应式网页的技术。FlexBox中常用的关键术语：

Flex line：flex容器内部沿着一条线对齐的flex子元素。默认情况下，在一个flex容器中只有一条flex线。

Main axis：flex子元素排列的主要轴线。根据flex-direction属性的不同，它可以是垂直或水平方向。

main-start edge 和 main-end edge：flex子元素从main-start edge开始，在main-end edge结束，在flex容器中沿着主轴方向排列。

Cross axis：与主轴垂直的轴线。

cross-start edge 和 cross-end edge：在容器中，flex线从cross-start edge开始，在cross-end edge结束，在容器中沿着交叉轴方向排列。

2.使用方法

要开始使用flexbox布局模块，你首先需要将一个元素定义为一个flex容器。如下：

<div class="flex-container">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
   <div class="flex-item">4</div>
   <div class="flex-item">5</div>
</div>

3.Flex容器属性

Flex容器属性定义了浏览器应该如何在flex容器内布局子元素。有六个flex容器属性：

flex-direction：指定flex子元素在flex容器内的排列方向。Flexbox是一种单向布局概念。因此，flex子元素只能在垂直列或水平行中堆叠。flex-direction属性可以取以下四个值：

    • row（默认）：将flex子元素水平地从左到右堆叠。
    • column：将flex子元素垂直地从上到下堆叠。
    • row-reverse：将flex子元素水平地从右到左堆叠。
    • column-reverse：将flex子元素垂直地从下到上堆叠。

flex-wrap：默认情况下，flex子元素会尝试在一条线上排列。因此，如果所有flex子元素的总高度（或宽度）大于flex容器的高度（或宽度），那么多余的子元素会溢出容器。flex-wrap指示是否应该将溢出的flex子元素换行到多条线上。flex-wrap属性可以取以下三个值：

    • nowrap（默认）：不换行，将所有flex子元素放在一条线上，即使有些子元素会溢出容器。
    • wrap：换行，将溢出的flex子元素放在新的一条线上，从cross-start edge到cross-end edge。
    • wrap-reverse：反向换行，将溢出的flex子元素放在新的一条线上，从cross-end edge到cross-start edge。

justify-content：指定如何沿着主轴对齐单行或多行的flex子元素。如果主轴上有多余的空间，这个属性可以控制这些空间的分配方式。justify-content属性可以取以下六个值：

    • flex-start（默认）：将所有flex子元素靠近main-start edge对齐，并在main-end edge留下空白。
    • flex-end：将所有flex子元素靠近main-end edge对齐，并在main-start edge留下空白。
    • center：将所有flex子元素居中对齐，并在main-start edge和main-end edge两边留下相同的空白。
    • space-between：将所有flex子元素均匀地分布在主轴上，并在main-start edge和main-end edge两边不留空白。
    • space-around：将所有flex子元素均匀地分布在主轴上，并在每个子元素两边留下相同的空白。
    • space-evenly：将所有flex子元素均匀地分布在主轴上，并在每个子元素两边和main-start edge和main-end edge两边留下相同的空白。

align-items：指定如何沿着交叉轴对齐单行或多行的flex子元素。如果交叉轴上有多余的空间，这个属性可以控制这些空间的分配方式。align-items属性可以取以下五个值：

    • stretch（默认）：拉伸所有flex子元素，使它们填满交叉轴方向的可用空间，除非它们有一个固定的高度（或宽度）。
    • flex-start：将所有flex子元素靠近cross-start edge对齐，并在cross-end edge留下空白。
    • flex-end：将所有flex子元素靠近cross-end edge对齐，并在cross-start edge留下空白
    • center：将所有flex子元素居中对齐，并在cross-start edge和cross-end edge两边留下相同的空白。
    • baseline：将所有flex子元素按照它们的基线对齐，并在cross-start edge和cross-end edge两边留下空白。

align-content：指定如何沿着交叉轴对齐多行的flex子元素。如果交叉轴上有多余的空间，这个属性可以控制这些空间的分配方式。align-content属性可以取以下八个值：

    • stretch（默认）：拉伸所有flex线，使它们填满交叉轴方向的可用空间，除非它们有一个固定的高度（或宽度）。
    • flex-start：将所有flex线靠近cross-start edge对齐，并在cross-end edge留下空白。
    • flex-end：将所有flex线靠近cross-end edge对齐，并在cross-start edge留下空白。
    • center：将所有flex线居中对齐，并在cross-start edge和cross-end edge两边留下相同的空白。
    • space-between：将所有flex线均匀地分布在交叉轴上，并在cross-start edge和cross-end edge两边不留空白。
    • space-around：将所有flex线均匀地分布在交叉轴上，并在每条线两边留下相同的空白。
    • space-evenly：将所有flex线均匀地分布在交叉轴上，并在每条线两边和cross-start edge和cross-end edge两边留下相同的空白。
    • flex-flow：是一个简写属性，用于同时设置flex-direction和flex-wrap属性。

注意：align-content属性不适用于单行的flex容器。要产生效果，flex容器必须是多行的，且flex-wrap属性设置为wrap或者wrap-reverse。

4.Flex子元素(Item)属性

Flex子元素属性定义了浏览器应该如何在flex容器内布局特定的子元素。有六种类型的flex子元素属性。

  • order：默认情况下，flex子元素按照HTML代码中定义的顺序排列。order属性指定了flex子元素在flex容器中出现的顺序。值必须是一个数字，默认是0。

注意：尽量按照HTML代码中的顺序排列子元素，只有在确实需要时才使用order属性。

  • flex-grow：定义了一个flex子元素相对于其他子元素在同一个容器中应该增长多少，以填充容器的剩余空间。值应该是无单位的，默认是0。如果所有子元素的flex-grow属性设置为相同的值，那么容器中的剩余空间将平均分配给所有子元素。

  • flex-shrink：定义了一个flex子元素相对于其他子元素在同一个容器中应该缩小多少，当容器中没有足够的空间时。默认值是1。

  • flex-basis：定义了一个flex子元素在主轴方向上的初始大小。值可以是一个长度单位，如px，em，rem等，或者是一个百分比，或者是auto（默认）。
  • flex：是一个简写属性，用于一次性设置flex-grow，flex-shrink，和flex-basis的值。默认值是flex: 0 1 auto。

注意：flex: initial（默认）等同于flex: 0 1 auto；flex: auto等同于flex: 1 1 auto；flex: none等同于flex: 0 0 auto；flex: inherit从父元素继承flex属性的值，顾名思义。

  • align-self：指定了一个特定的flex子元素在交叉轴方向上的对齐方式。它可以覆盖容器的align-items属性。align-self属性可以取以下除默认之外五个值：
    • auto（默认）：继承容器的align-items属性的值。
    • stretch：拉伸子元素，使它填满交叉轴方向上的可用空间，除非它有一个固定的高度（或宽度）。
    • flex-start：将子元素靠近cross-start edge对齐，并在cross-end edge留下空白。
    • flex-end：将子元素靠近cross-end edge对齐，并在cross-start edge留下空白。
    • center：将子元素居中对齐，并在cross-start edge和cross-end edge两边留下相同的空白。
    • baseline：将子元素按照它的基线对齐，并在cross-start edge和cross-end edge两边留下空白。