与flex相见恨晚-原来你这么好用！

[devhaozi (小耗子)]

前言

嘿，你是否厌倦了和CSS斗智斗勇，像是和一只任性的猫打交道一样？那么，让我来向你介绍Flex布局，这就像是给你的网页加了一把神奇的排版魔杖！别再像个失恋的程序员一样抓耳挠腮了，Flex布局就像是你的排版小助手，会让你的元素排得整整齐齐，就像是乖巧的小兵在你的网页上列队一样！无论是横着摆还是竖着排，Flex布局都能轻松搞定，就像是给你的网页穿上了一件柔软舒适的弹性衣服，让你的页面焕然一新！别再为了排版而烦恼，让Flex布局给你的网页带来一丝丝的灵活和愉悦吧！

1.初识flex

因为flex布局主要是在父元素上设置属性，因此父元素上有大量的属性供我们选择，接下来我们将逐步讲解。

2.设置主轴方向

Flex布局中的flex-direction属性用于指定Flex容器中的主轴方向。它决定了Flex项目在容器中的排列方式，影响到了Flex项目的布局方向。

这个属性有四个可能的值：

1. row（默认值） ：这意味着Flex容器的主轴是水平方向，Flex项目将水平排列。
2. row-reverse：这也是水平方向排列，但Flex项目的顺序与默认情况相反。
3. column：这意味着Flex容器的主轴是垂直方向，Flex项目将垂直排列。
4. column-reverse：这也是垂直方向排列，但Flex项目的顺序与默认情况相反。

嘿，现在让我们用一些幽默的例子来解释这些值：

1. row：就像是在一条船上排队，所有的Flex项目都站在一条直线上，准备出海探险。
2. row-reverse：这就像是船上的队伍突然被逆转了，现在最后一个人变成了队伍的首领，大声命令着大家准备启航。
3. column：这就像是在一个高大的柜子里排列杯子，它们从上到下一列列地堆叠着，等待被使用。
4. column-reverse：这时，柜子里的杯子被颠倒过来了，现在最下面的杯子变成了最上面的，就像是杯子们在玩一场倒立游戏。

无论是横着排还是竖着排，Flex布局的flex-direction都能让你的项目排列得井井有条，就像是在舞台上编排一场精彩的表演一样！

我们首先要确定好主轴上的方向，主要是x（row）和y（column）轴两种。

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: column;
      width: 800px;
      height: 400px;
      background-color: pink;
    }
span {
  width: 100px;
  height: 100px;
  background-color: blue;
}

  
  

    1
    2
    3
    4
  

3.设置主轴元素排列方式

justify-content属性用于设置Flex容器中Flex项目在主轴上的对齐方式。这个属性控制了项目在容器内的水平对齐方式。

这个属性有五个可能的值：

1. flex-start：默认值，项目位于容器的开头。
2. flex-end：项目位于容器的结尾。
3. center：项目位于容器的中心。
4. space-between：项目位于容器内，两端对齐，项目之间的间隔相等。
5. space-around：项目位于容器内，项目两侧的间隔相等，项目与容器边缘的距离是项目间隔的一半。

让我们用一些幽默的例子来解释这些值：

1. flex-start：就像是一群小猫咪在箱子里，它们都挤在一起，试图争夺着箱子的前端，想要第一个跳出来。
2. flex-end：与之相反，现在这些小猫都跑到了箱子的尽头，准备一起从箱子里冲出去，参加一场奇幻的冒险。
3. center：这时，箱子里的小猫们都聚集在箱子的中央，仿佛在商量着下一步要做什么，是不是一起唱首歌呢？
4. space-between：现在箱子里的小猫们都站在等距离的位置，就像是在一条直线上排队等待接受奖励一样，每个人都有自己的位置。
5. space-around：最后，小猫们在箱子里均匀地分布，每只小猫都有足够的空间来舒展自己的身体，仿佛在自己的王国里一样。

无论是挤在一起还是分散排列，justify-content属性都能让你的Flex项目在主轴上得到合适的对齐，就像是给小猫们一个在箱子里舞蹈的舞台一样！

我们通过这个属性来设置主轴上元素的排列方式。

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 800px;
      height: 400px;
      background-color: pink;
    }
span {
  width: 100px;
  height: 100px;
  background-color: blue;
}

  
  

    1
    2
    3
    4
  

4.设置子元素是否换行

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 800px;
      height: 400px;
      background-color: pink;
    }
span {
  width: 200px;
  height: 100px;
  background-color: blue;
}

  
  

    1
    2
    3
    4
    5
    6
    7
  

5.设置单行侧轴元素排列方式

align-items属性用于设置Flex容器中Flex项目在交叉轴上的对齐方式。这个属性控制了项目在容器内的垂直对齐方式。

这个属性有五个可能的值：

1. flex-start：项目位于交叉轴的起始位置。
2. flex-end：项目位于交叉轴的结束位置。
3. center：项目位于交叉轴的中心位置。
4. baseline：项目位于交叉轴的基线上。
5. stretch：默认值，项目被拉伸以适应容器。

让我们用一些形象的例子来解释这些值：

1. flex-start：就像是一排身高不同的小朋友站在一起，他们的头部都对齐在一条线上，而脚则在下面，这时每个人的头都在同一高度。
2. flex-end：与之相反，现在小朋友们的脚都对齐在一条线上，而头部则在上面，这时每个人的脚都在同一高度。
3. center：这时，小朋友们都站在交叉轴的中心位置，无论他们的身高如何，他们都在同一高度上。
4. baseline：如果小朋友们站在字母的底线上，那么他们的基线就是一样的，这时每个人的基线都在同一高度。
5. stretch：这时，小朋友们的身体被拉伸以适应整个容器的高度，无论他们原本的身高如何，他们都会填满整个容器。

无论是头对齐还是脚对齐，align-items属性都能让你的Flex项目在交叉轴上得到合适的对齐，就像是给小朋友们一个站在一起的舞台一样！

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;
      width: 800px;
      height: 400px;
      background-color: pink;
    }
span {
  width: 100px;
  height: 100px;
  background-color: blue;
}

  
  

    1
    2
    3
    4
    5
    6
    7
  

6.设置多行侧轴元素排列方式

align-content属性用于设置多行的Flex容器中各行在交叉轴上的对齐方式。这个属性只在项目分布于多行时生效，单行的情况下不会起作用。

这个属性有六个可能的值：

1. flex-start：多行排列在交叉轴的起始位置。
2. flex-end：多行排列在交叉轴的结束位置。
3. center：多行排列在交叉轴的中心位置。
4. space-between：多行均匀分布在交叉轴上，首行位于容器起始位置，末行位于容器结束位置。
5. space-around：多行均匀分布在交叉轴上，各行周围有相等的空间。
6. stretch：默认值，多行被拉伸以填满整个容器的高度。

让我们用一些例子来解释这些值：

1. flex-start：就像是多行的小朋友站在一起，他们的头部都对齐在一条线上，而脚则在下面，这时每行的头部都在同一高度。
2. flex-end：与之相反，现在每行的脚都对齐在一条线上，而头部则在上面，这时每行的脚都在同一高度。
3. center：这时，每行的小朋友们都站在交叉轴的中心位置，无论他们的身高如何，每行都在同一高度上。
4. space-between：多行均匀分布在交叉轴上，首行的头部位于容器的起始位置，末行的脚部位于容器的结束位置，各行之间的间距相等。
5. space-around：多行均匀分布在交叉轴上，各行之间有相等的间距，并且首行和末行与容器的边缘之间也有间距。
6. stretch：这时，每行的小朋友们的身体被拉伸以填满整个容器的高度，无论他们原本的身高如何，每行都会填满整个容器。

align-content属性在多行的Flex布局中可以帮助你控制各行在交叉轴上的对齐方式，让你的布局更加灵活和美观。

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: space-around;
      width: 800px;
      height: 400px;
      background-color: pink;
    }
span {
  width: 200px;
  height: 100px;
  background-color: blue;
}

  
  

    1
    2
    3
    4
    5
    6
    7
  

7.复合属性

8.子元素占有分数属性

  
  
  Document
  
    .a {
      display: flex;
      flex-direction: row;
      width: 800px;
      height: 400px;
      background-color: pink;
      justify-content: space-around;
    }
span {
  width: 200px;
  height: 100px;
  background-color: blue;
}


span:nth-child(2) {
  flex: 10;
  background-color: black;
}

span:nth-child(1) {
  flex: 1;
  background-color: yellow;
}

span:nth-child(3) {
  flex: 1;
  background-color: green;
}

  
  

    1
    2
    3
  

9.控制子元素单个在侧轴上的排列方式和排列顺序

10.小结

弹性布局（Flexbox）是一种用于设计灵活、自适应的网页布局的工具，它提供了一种更加简单、直观的方法来排列、对齐和分布元素。以下是弹性布局的总结：

1. 容器属性：

   • display: flex;：将一个元素设置为Flex容器，使其内部的子元素成为Flex项目。
   • flex-direction：指定Flex容器内部子元素的排列方向，可以是水平方向（row）、垂直方向（column）、水平反转（row-reverse）或垂直反转（column-reverse）。
   • flex-wrap：指定Flex容器内部子元素的换行方式，可以是单行不换行（nowrap）、自动换行（wrap）或反转换行（wrap-reverse）。
   • justify-content：控制Flex项目在主轴上的对齐方式，可以是起始对齐（flex-start）、末尾对齐（flex-end）、居中对齐（center）、两端对齐（space-between）、均匀分布（space-around）或者以等比例填充（space-evenly）。
   • align-items：控制Flex项目在交叉轴上的对齐方式，可以是起始对齐（flex-start）、末尾对齐（flex-end）、居中对齐（center）、基线对齐（baseline）或者拉伸填充（stretch）。
   • align-content：只在多行布局中有效，控制多行Flex项目在交叉轴上的对齐方式，可以是起始对齐（flex-start）、末尾对齐（flex-end）、居中对齐（center）、均匀分布（space-between）、均匀分布并留有间距（space-around）或者拉伸填充（stretch）。

2. 项目属性：（拓展）

   • flex-grow：定义项目的放大比例，如果父容器有剩余空间，项目会按照比例分配。
   • flex-shrink：定义项目的缩小比例，如果空间不足，项目会按照比例缩小。
   • flex-basis：定义项目在不伸缩情况下的基础大小。
   • flex：是flex-grow、flex-shrink和flex-basis的简写形式。
   • order：定义项目的排列顺序，数值越小越靠前。

3. 其他属性：

   • align-self：用于覆盖父容器的align-items属性，可以单独控制某个Flex项目在交叉轴上的对齐方式。

弹性布局具有响应式设计的特点，可以轻松适应不同设备和屏幕尺寸，提供了更加简洁、灵活的网页布局解决方案。

---

这是一个从 https://juejin.cn/post/7368753329667719231 下的原始话题分离的讨论话题