使用flex的心得

不念不忘少年蓝@ 2022-11-27 10:19 145阅读 0赞

我做项目的时候经常使用display\+position\+float这些属性来给盒子模型布局样式，当时每次调试出来样式总是会飘，而且无法适配多种不同尺寸的屏幕。

在上网查询资料后，发现有一个很好的解决方式，就是flex布局。它可以简便，完美的解决以前很难实现的布局，而且仅仅使用了几行的css，可谓是我的福音啊！所以在后面的页面编写中，我大量的使用了flex属性，提高了写样式的速度和质量。而且它已经得到了几乎所有的浏览器的支持。记录一下我的使用心得，方便复习。

参考文章：作者，阮一峰

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]

### 本文的目录 ###

*  一，flex介绍
 *  二，flex的使用
 *   *  1，父容器属性
     *   *  （1）flex-direction
         *  （2）flex-wrap
         *  （3）flex-content
         *  （4）align-items
         *  （5）align-content
     *  2，子容器属性
     *   *  （1）order
         *  （2）flex-grow
         *  （3）flex-shrink
         *  （4）flex-basis
         *  （5）flex
         *  （6）align-self
 *  三，实际效果
 *   *  1，盒子内的垂直居中
     *  2，常用item栏
     *  3，常用tab栏

# 一，flex介绍 #

flex是Flexible Box的缩写，任何的一个容器都能被当成一个盒子来使用，而且盒子具有强大的灵活性，操作性高。  
只需要在对应的容器上css加上display:flex；即可使用flex布局。

# 二，flex的使用 #

## 1，父容器属性 ##

### （1）flex-direction ###

这个决定了父容器主轴的方向，一共有4个值

**row(默认)**，主轴为水平方向，从左到右

**row-reverse**，从右到左

**column**，主轴为垂直方向，从上到下

**column-reverse**，从下到上

.box{ 
    	flex-direction: row;
    }

![flex-direction][]

### （2）flex-wrap ###

默认情况下，flex布局会把所有的子元素都给挤在一个主轴线上，即使超过，也会平均缩小，直到挤在一个主轴上。那么如何让它换行呢，使用flex-wrap，它一共有三个值。

.box{ 
    	flex-wrap: nowrap;
    }

**nowrap（默认）**，不换行

![在这里插入图片描述][20200814232954275.png_pic_center]

**wrap**，换行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

**wrap-reverse**，换行且从下往上

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]

### （3）flex-content ###

最好用，且最常用的一个属性之一，规定了主轴上的对齐方式。一共有5个值。

**flex-start**，**flex-end**，**center**，**space-between**，**space-around**

.box{ 
    	flex-content: flex-start;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]

### （4）align-items ###

也是最好用，且最常用的一个属性之一，规定了交叉轴上的对齐方式。一共有5个值。

**flex-start**，**flex-end**，**center**，**stretch**，**baseline**

.box{ 
    	align-items: flex-start;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]

### （5）align-content ###

如果主轴上你有多个行，那么这个属性能够让这多行具有丰富的对其方式。但是如果只有一个行，那么这个属性就会失效。一共有六个值。

**flex-start**，**flex-end**，**center**，**stretch**，**space-between**，**space-around**

.box{ 
    	align-content: flex-start;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]

## 2，子容器属性 ##

### （1）order ###

定义了子元素的优先级，当order的数值越小，就会排在主轴的最开始的位置。

.item{ 
    	order: 1;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]

### （2）flex-grow ###

规定了子元素的放大比例，如果设置一个子元素为2，其余的子元素为1.那么这个2是其他元素空间的两倍。

.item{ 
    	flex-grow: 1;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 7]

### （3）flex-shrink ###

相对于flex-grow，这是子元素的缩小比例。默认为1，即主轴上空间不够，该子元素就会等比例缩小，当设置为0时，不会缩小。负数属性无效。

.item{ 
    	flex-shrink: 1;
    }

![在这里插入图片描述][20200815120952324.png_pic_center]

### （4）flex-basis ###

该属性是用来计算主轴上是否有空余空间，子元素的默认大小就是这个，它的默认值为auto。

.item{ 
    	flex-shrink: 1;
    }

### （5）flex ###

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item { 
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

### （6）align-self ###

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 8]

# 三，实际效果 #

## 1，盒子内的垂直居中 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 9]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>flex</title>
      <style> .box{ display: flex; justify-content: center; /* 水平方向 */ align-items: center; /* 垂直方向 */ height: 300px; width: 300px; background-color: blue; } .item{ height: 100px; width: 100px; background-color: red; } </style>
    </head>
    <body>
      <div class="box">
        <div class="item"></div>
      </div>
    </body>
    </html>

## 2，常用item栏 ##

![在这里插入图片描述][20200815122626342.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>flex</title>
      <style> .box{ display: flex; /* flex-direction: row-reverse; */ justify-content: space-around; align-items: center; height: 100px; width: 300px; background-color: blue; } .item-left{ height: 80px; width: 80px; background-color: red; } .item-right{ height: 80px; width: 150px; background-color: red; } </style>
    </head>
    <body>
      <div class="box">
        <div class="item-left">图像</div>
        <div class="item-right">文字</div>
      </div>
    </body>
    </html>

## 3，常用tab栏 ##

![在这里插入图片描述][20200815123150374.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>flex</title>
      <style> .box{ display: flex; /* flex-direction: row-reverse; */ justify-content: space-around; align-items: center; height: 60px; width: 320px; background-color: blue; } .item{ height: 60px; width: 80px; background-color: red; border: 1px solid white; text-align: center; } </style>
    </head>
    <body>
      <div class="box">
        <div class="item">首页</div>
        <div class="item">通讯录</div>
        <div class="item">发现</div>
        <div class="item">我</div>
      </div>
    </body>
    </html>

持续更新…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/8ea064da685e496e9c55fcb3782505e1.png
[flex-direction]: /images/20221124/6ee7c7ccb6504b7aacd831b33e4042de.png
[20200814232954275.png_pic_center]: /images/20221124/413f87b4e5144078a6ed41760188fc5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/ede0e18835aa407fb3c0fc603def6db5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/677a2c7b1262402d896dba9bbb8f4e1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/56971ce1757d473bb3922504462e7eae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/10552fb2a8bf4dbb87dab6bf85819e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/5c2a530eab264753914efad7899b8a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/cb71d991b2864c50b7f1f474c5b69726.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/11034b4542374de1bb36e7c37673ee07.png
[20200815120952324.png_pic_center]: /images/20221124/00e8446cc7a4478786c5a9ea54f2e5b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/c4fd32c58b9048aeba3c85fef035b408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/74021d2b7e4f4a2a846859eb58c72e57.png
[20200815122626342.png_pic_center]: /images/20221124/ca692b3ca5ba43cba20a01b71d87071d.png
[20200815123150374.png_pic_center]: /images/20221124/433973ca051c43468e3bab6c2e916067.png