如何讲清楚Flex弹性盒模型？(上)

骑猪看日落 2023-10-06 14:32 27阅读 0赞

### 一、什么是Flex弹性盒？ ###

**Flex弹性盒**，意为**“弹性布局”**，用来为盒状模型提供最大的灵活性。

当一个元素 **display:flex** 的时候，内部元素float会失效，vertical-align也会失效

因此我们至少能确定一点，flex替代了浮动的解决方案。

我们来看一下它的基本特点。

在**flex容器**当中，div这样的块元素不再独占一行

而是自动排成一行。

![2f314caf05b6480fa4845ed3345989de.png][]

这个效果虽然和浮动很像, 但是请记住, 在flex的容器里, 不存在浮动的概念, 我将代码贴出来, 大家可以自行尝试.

**dispplay: flex**的元素，称为**Flex容器**（flex container），它的所有子元素称为**Flex项目**（flex item）。

在flex容器当中, 项目的排列方式默认是row(水平的). 可以使用**flex-direction属性**进行更改

.container {
        display: flex;
        flex-direction: row;  /*这是默认值, 按照row(水平方向)排列*/
    }

如果将这个属性进行更改column

.container {
        display: flex;
        flex-direction: column;  /* 按照列column(垂直方向)排列*/
    }

效果如下:

![8272ac048ddf41dea37f2231d9b3484a.png][]

你看, **flex容器**里的**项目**, 变成了垂直方向, 由上至下排列

**对于一个flex容器来说, 子项目的排列方向, 只有row和column这两种,**

**怎么样, 很简单把?**

当然, 项目不仅可以从左向右, 还可以反过来, 从右向左

.container{
        display: flex;
        flex-direction: row-reverse;/* 按照行(反方向)排列*/
    }

效果如下:

![c504e93e1db64ef493aa2840f8709c78.png][]

垂直方向也是如此

.container{
        display: flex;
        flex-direction: column-reverse;/* 按照列(反方向)排列*/
    }

![99533e35086846b88d0870580cc37a0c.png][]

--------------------

一个flex容器, 子项目默认是不换行的

当然, 想要换行的话, 可以通过**flex-wrap属性**可以修改

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

我们还可以通过 **justify-content属性 设置「主轴」的对齐方式**

> ***注意:主轴的方向不一定是水平方向*** *它是由flex-direction决定的. 可以是 row方向 也可以 column方向, 下面的例子假定主轴为row, 因此column方向为对应 侧轴*

.container {
         justify-content: flex-start | flex-end | center | space-between | space-around;
    }

> flex-start 可以理解为左对齐

![042fc03bebb4420fb80a46d165104383.png][]

flex-end 可以理解为右对齐

![69581fcd55704f73837573267d4f09a8.png][]

center 居中对齐

![2a3bd1111699402183142c5c02cd96c7.png][]

space-between 两侧对齐

![4ad0cc659fbb4d09afd29443dd779282.png][]

space-around 两侧间隔均匀

![1e492ce6dab046f383d45378e1d2f7ee.png][]

--------------------

如果flex容器是固定高度的, 且大于了子元素, 这时, 我们可能还需要**侧轴**(垂直方向)**的对齐方式**

> align-items属性定义项目在交叉轴上如何对齐。

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

> flex-start 可以理解为顶部对齐

![650f6c873b4144cbb87a6d71075737f1.png][]

> flex-end 底部对齐

![245a65d13ce945a481870d6e49a8af7c.png][]

> center 中部对齐

![cc519a76692e498eafafc68f6d817f01.png][]

> baseline 基线对齐

![493b73314daa4442bd07cfcfc37216fa.png][]

> stretch 上下两侧对齐

![4d7610bbf1f04f939e20d66d8d762e61.png][]

子元素设置了高度, 因此没有效果

![c6517547222d4d98a2bd400a2144d86a.png][]

子元素没有设置高度

--------------------

简单总结一下

#### 弹性盒的容器属性（添加在父元素身上 ） ####

**1 display:flex;属性**

.box{
       display: -webkit-flex; /* Safari或者chrome*/
       display: flex;
    }

**注意：**设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

同时，需要加上-webkit-前缀，兼容-webkit-低版本写法。

**2 flex-direction属性**

flex-direction属性决定主轴的方向（即容器内子元素的排列方向）。

.box {
        flex-direction: row | row-reverse | column | column-reverse;
    }

**3 flex-wrap属性**

默认情况下，子元素都排在一条线（又称”轴线”）上, 不换行。flex-wrap属性定义是否换行, 以及换行方式

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

**4 justify-content属性**

justify-content属性定义了项目在主轴上的对齐方式。

.box {
         justify-content: flex-start | flex-end | center | space-between | space-around;
    }

**5 align-items属性**

align-items属性定义项目在交叉轴上如何对齐。

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

[2f314caf05b6480fa4845ed3345989de.png]: https://img-blog.csdnimg.cn/2f314caf05b6480fa4845ed3345989de.png
[8272ac048ddf41dea37f2231d9b3484a.png]: https://img-blog.csdnimg.cn/8272ac048ddf41dea37f2231d9b3484a.png
[c504e93e1db64ef493aa2840f8709c78.png]: https://img-blog.csdnimg.cn/c504e93e1db64ef493aa2840f8709c78.png
[99533e35086846b88d0870580cc37a0c.png]: https://img-blog.csdnimg.cn/99533e35086846b88d0870580cc37a0c.png
[042fc03bebb4420fb80a46d165104383.png]: https://img-blog.csdnimg.cn/042fc03bebb4420fb80a46d165104383.png
[69581fcd55704f73837573267d4f09a8.png]: https://img-blog.csdnimg.cn/69581fcd55704f73837573267d4f09a8.png
[2a3bd1111699402183142c5c02cd96c7.png]: https://img-blog.csdnimg.cn/2a3bd1111699402183142c5c02cd96c7.png
[4ad0cc659fbb4d09afd29443dd779282.png]: https://img-blog.csdnimg.cn/4ad0cc659fbb4d09afd29443dd779282.png
[1e492ce6dab046f383d45378e1d2f7ee.png]: https://img-blog.csdnimg.cn/1e492ce6dab046f383d45378e1d2f7ee.png
[650f6c873b4144cbb87a6d71075737f1.png]: https://img-blog.csdnimg.cn/650f6c873b4144cbb87a6d71075737f1.png
[245a65d13ce945a481870d6e49a8af7c.png]: https://img-blog.csdnimg.cn/245a65d13ce945a481870d6e49a8af7c.png
[cc519a76692e498eafafc68f6d817f01.png]: https://img-blog.csdnimg.cn/cc519a76692e498eafafc68f6d817f01.png
[493b73314daa4442bd07cfcfc37216fa.png]: https://img-blog.csdnimg.cn/493b73314daa4442bd07cfcfc37216fa.png
[4d7610bbf1f04f939e20d66d8d762e61.png]: https://img-blog.csdnimg.cn/4d7610bbf1f04f939e20d66d8d762e61.png
[c6517547222d4d98a2bd400a2144d86a.png]: https://img-blog.csdnimg.cn/c6517547222d4d98a2bd400a2144d86a.png