超哇塞的Flex布局教程！！Blue带你图文详解Flex，让新手宝宝不在困惑

Hello,hello,这里是Blue!ヾ(•ω•`)o ，相信很多小伙伴们在学习css中的flex布局的时候会很头疼，因为是新手宝宝，理解起来费劲也很正常，但是作为前端很经典的布局，还是有学习的必要的，所以本篇文章，俺Blue会通过自己的理解，结合图文带新手宝子们去克服这个大困难，希望我的这篇文章能帮助各位，也希望宝子们遇到问题的时候可以积极的在评论区留言，我会一一答复的，谢谢大家！！！(´▽`ʃ♡ƪ)

本文参考文档：https://doc.houdunren.com/%E7%B3%BB%E7%BB%9F%E8%AF%BE%E7%A8%8B/css/1%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html

建议食用视频：

http://【呀！被闪电击中了，css3 flex布局 - 弹性盒模型让布局飞起来】 https://www.bilibili.com/video/BV1B4411z7rv/?share_source=copy_web&vd_source=bb412cc25ca27e171f8e17085daad038

Flex布局：

什么是flex布局？

Flex布局，全称“Flexible Box Layout”，是一种CSS布局模型，用于在容器中排列子元素。它提供了一种更加有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或是动态变化的。Flex布局的主要目标是提供一种更加灵活的方式来布置元素，使其能够适应不同屏幕尺寸和显示设备。

Flex布局的主要特性包括：

方向：Flex容器的子元素可以水平或垂直排列。
顺序：可以轻松改变子元素的排列顺序。
对齐：可以沿着主轴或交叉轴对齐子元素。
动态大小：子元素的大小可以动态地在容器内增长或缩小。

Flex布局的核心概念包括：

Flex容器（Flex Container）：声明为Flex布局的父元素，用于包含子元素。通过设置display属性为flex或inline-flex可以定义一个flex容器。
Flex项目（Flex Item）：Flex容器的直接子元素自动成为flex项目。
主轴（Main Axis）：Flex项目的主要排列方向，默认是水平方向。
交叉轴（Cross Axis）：与主轴垂直的轴。

Flex布局提供了丰富的属性来控制flex容器的布局和flex项目的对齐方式，包括justify-content、align-items、flex-direction等。这些属性使得Flex布局成为响应式设计和移动端布局的强大工具。

声明定义flex:

定义：

容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

声明块级弹性盒子：

代码：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  article {
    height: 150px;
    margin-left: 100px;
    margin-top: 100px;
    outline: solid 5px silver;
    display: flex;
    padding: 20px;
  }
  article div {
    outline: solid 5px blueviolet;
    text-align: center;
    font-size: 28px;
    line-height: 5em;
    width: 300px;
  }
</style>
...

<article>
  <div>1</div>
	<div>2</div>
	<div>3</div>
</article>

效果：

声明内联级弹性盒子：

代码：

<style>
  ...
  article {
   	...
    display: inline-flex;
    ...
  }
  ...
</style>

效果：

flex-direction：用于控制盒子元素排列的方向。

定义：

row-reverse :

代码：

<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    margin: 100px;
    font-size: 14px;
    color: #555;
  }
  article {
    width: 500px;
    border: solid 5px silver;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    flex-direction: row-reverse;
  }
  article * {
    border: solid 5px blueviolet;
    padding: 10px;
    margin: 10px;
  }
</style>
...

<article>
	<h4>后盾人</h4>
	<span>hdcms.com</span>
	<p>houdunren.com</p>
</article>

效果：

column-reverse

代码：

article {
	...
	flex-direction: column-reverse;
	...
}

效果：

flex-wrap：溢出换行，同时增加辅助轴

定义：

wrap：

<style>
	* {
    padding: 0;
    margin: 0;
    outline: solid 1px silver;
    padding: 10px;
    margin: 10px;
  }
  head {
    display: block;
  }
  body {
    font-size: 14px;
    color: #555;
  }
  article {
    width: 500px;
    border: solid 5px silver;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  article div {
    border: solid 5px blueviolet;
    padding: 30px 80px;
    margin: 10px;
    text-align: center;
    font-size: 28px;
  }
</style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

行溢出：

列溢出：

wrap-reverse

代码：

...
flex-direction: row;
flex-wrap: wrap-reverse;
...

行溢出：

列溢出：

轴说明

水平排列：

下面是使用 flex-flow: row wrap 的主轴与交叉轴说明。

下面是使用 flex-flow: row-reverse wrap-reverse 的主轴与交叉轴说明。

垂直排列：

下面是使用 flex-flow: column wrap 的主轴与交叉轴说明

justify-content：用于控制元素在主轴上的排列方式

介绍：

用于控制元素在主轴上的排列方式。

水平排列元素，并使用 `justify-content: flex-end` 对齐到主轴终点：

效果图：

代码：

<style>
  * {
    padding: 0;
    margin: 0;
    padding: 10px;
    margin: 10px;
  }
  body {
    font-size: 14px;
    color: #555;
  }
  article {
    border: solid 5px silver;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
  }
  article div {
    width: 80px;
    border: solid 5px blueviolet;
    text-align: center;
    font-size: 28px;
  }
</style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

使用 `space-evenly`平均分配容器元素

效果图：

代码：

...
article {
  border: solid 5px silver;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
...

垂直排列时对齐到主轴终点: justify-content: flex-end

效果图：

代码：

...
article {
  height: 400px;
  border: solid 5px silver;
  box-sizing: border-box;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
}
...

交叉轴行

介绍：

元素在交叉轴上有行的概念，理解这个概念会对理解 align-items 与 align-content 有更好的帮助。

align-item 是控制元素在行上的排列
align-content 是控制行在交差轴上的排列

align-items：用于控制容器元素在辅助轴上的排列方式

介绍：

用于控制容器元素在辅助轴上的排列方式

align-items: flex-start

行排列时：

行排列主轴是水平线，辅助轴是垂直线

...
flex-direction: row;
align-items: flex-start;
...

列排列时：

列排列，主轴是垂直线，辅助轴是水平线

flex-direction: row;
align-items: flex-end;

align-items: flex-end

行排列：

flex-direction: row;
align-items: flex-end;

列排列：

flex-direction: column;
align-items: flex-end;

align-items: center

对齐到交叉轴中心

行排列：

flex-direction: row;
align-items: center;

列排列:

flex-direction: column;
align-items: center;

align-content

定义：

只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式。

align-self：控制单个元素在辅助轴上的排列方式

定义：

用于控制单个元素在辅助轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

flex-grow：用于将弹性盒子的可用空间，分配给弹性元素

用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。

例子：

<style>
  * {
    padding: 0;
    margin: 0;
    padding: 10px;
    margin: 5px;
  }
  article {
    width: 600px;
    position: relative;
    height: 200px;
    border: solid 5px silver;
    display: flex;
  }
  article div {
    min-height: 80px;
    border: solid 5px blueviolet;
    text-align: center;
    font-size: 28px;
  }
  article div:nth-of-type(1) {
    width: 100px;
    flex-grow: 1;
  }
  article div:nth-of-type(2) {
    width: 100px;
    flex-grow: 3;
  }
  article div:nth-of-type(3) {
    width: 300px;
    flex-grow: 6;
  }
</style>
...

flex-shrink：在弹性盒子装不下元素时定义的缩小值

与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。

下例在 600 宽的弹性盒子中放了 1000 宽的弹性元素。并为最后两个元素设置了缩放，最后一个元素的缩放比例为 500 -( ( (1000-600) / (100X1+400x3+500X6) ) x 3 ) X 500 = 220.9，计算公式说明如下：

缩小比例 = 不足的空间 / (元素 1 宽度 x 缩小比例) + (元素 2 宽度 x 缩小比例) ...最终尺寸 = 元素三宽度 - (缩小比例 x 元素 3 的宽度) X 元素宽度

<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        padding-left: 50px;
        padding-top: 15px;
    }
    article {
        border: solid 5px silver;
        width: 400px;
        height: 120px;
        display: flex;
        padding: 10px;
        box-sizing: content-box;
    }
    article div:nth-child(1) {
        flex-shrink: 0;
    }
    article div:nth-child(2) {
        flex-shrink: 1;
    }
    article div:nth-child(3) {
        flex-shrink: 3;
    }
    article * {
        width: 200px;
        height: 100px;
        overflow: hidden;
        background: blueviolet;
        background-clip: content-box;
        padding: 10px;
        border: solid 1px blueviolet;
        box-sizing: border-box;
        font-size: 30px;
        color: white;
    }
</style>

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间

简单来说他定义这个盒子多大

<style>
  * {
    padding: 0;
    margin: 0;
  }
  article {
    width: 600px;
    position: relative;
    height: 150px;
    margin-left: 100px;
    margin-top: 100px;
    outline: solid 5px silver;
    display: flex;
    padding: 20px;
  }
  article div {
    outline: solid 5px blueviolet;
    text-align: center;
    font-size: 28px;
    line-height: 5em;
  }
  article div:nth-of-type(1) {
    flex-basis: 100px;
    width: 200px;
  }
  article div:nth-of-type(2) {
    flex-basis: 200px;
  }
  article div:nth-of-type(3) {
    flex-basis: 200px;
  }
</style>
...

<article>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</article>

order：用于控制弹性元素的位置

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。

弹性文本：

文本节点也在弹性布局操作范围内。

<style>
    article {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 100vh;
        align-items: center;
        font-size: 14px;
    }
</style>

<article>
    后盾人
    <span>houdunren</span>
    后盾人
</article>

结尾致谢：

🎈🎈🎉🎉非常感谢您的阅读，也非常感谢b站的大佬后盾人无私的分享自己的知识。通过他的视频，俺学到挺多的，也希望小伙伴们可以去看看这位大佬的视频（在b站上哟），我相信收获会很大滴！！好了也是该告别的时候了，俺是Blue前端领域爱好者，誓要成为全栈大佬，再见喏！！！🎈🎈🎉🎉

全栈Blue

关注

29
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
超哇塞的Flex布局教程！！Blue带你图文详解Flex，让新手宝宝不在困惑

Flex布局，全称“Flexible Box Layout”，是一种CSS布局模型，用于在容器中排列子元素。它提供了一种更加有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或是动态变化的。Flex布局的主要目标是提供一种更加灵活的方式来布置元素，使其能够适应不同屏幕尺寸和显示设备。方向：Flex容器的子元素可以水平或垂直排列。顺序：可以轻松改变子元素的排列顺序。对齐：可以沿着主轴或交叉轴对齐子元素。动态大小：子元素的大小可以动态地在容器内增长或缩小。
复制链接

扫一扫