Flex布局的知识回顾 + 应用

悠悠 2021-12-07 12:43 370阅读 0赞

# 一、 flex布局（弹性布局）的介绍： #

flex是Flexible Box的缩写， 意为**弹性布局，**用来为盒状模型提供最大的灵活性；任何一个容器都可以制定为flex布局， 行内元素也可以使用flex布局， 不过设置为flex布局之后，  子元素的float、 clear、 vertical-align 属性都将失效；

//任何一个容器都可以制定为flex布局
    
     .main{     display: flex;  }
    
    // 行内元素也可以使用flex布局
    
    .main{     display: inline-flex;  }

# 二、flex容器的属性： #

1. flex-direction   2. flex-wrap    3.  flex-flow   4.  justify-content   5. align-items    6. align-content

## 2.1  flex-direction属性： ##

flex-direction 属性决定着主轴的方向。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

.main{
        flex-direction: row;   //（默认值）主轴为水平方向， 起点在左边 （上图3）
        flex-direction: row-reverse;   //主轴为水平方向， 起点在右边（反向） （上图4）
        flex-direction: column;      //主轴方向为垂直方向， 起点从上到下    （上图1）
        flex-direction: column-reverse;    //主轴方向为垂直方向， 起点从下往上 （上图2）
    }

## 2.2  flex-wrap 属性： ##

.main{
        flex-wrap:  no-warp;   //（默认） 不换行
        flex-wrap:  wrap;       //换行， 第一行在上面
        flex-wrap:  wrap-reverse;  //换行，反向，第二行在上面
    }

## 2.3  flex-flow属性： ##

flex-flow：  是flex-direction 和 flex-wrap的缩写，默认为row nowrap;

.main{
        flex-flow:  <flex-direction> | <flex-wrap>
    }

## 2.4  justify-content 属性： ##

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

.main{
        justify-content: flex-start;  /* 从左向右 */
        justify-content: flex-end;   /* 从右向左 */
        justify-content: center;     /* 居中排列 */
        justify-content: space-between;  /* 两端对齐，项目之间的间隔都相等 */
        justify-content: space-around;    /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */  
    }

**flex-start:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1][]

**flex-end:**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2][]

**center:**

![20190716223200742.png][]

**space-between:**

![2019071622331729.png][]

**space-around: **

![2019071622342425.png][]

## 2.5  align-items 属性： ##

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

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

**justify-content只能控制水平方向上，如果子元素高度不一致的时候，我们想要控制垂直方向上的布局，特别是在有些图表类的项目里面体现更明显；**

flex-start: ![20190716223950554.png][]

flex-end:

![20190716224036503.png][]

center:

![20190716224144811.png][]

baseline:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 3][]

stretch:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 4][]

## 2.6 align-content属性： (多行对齐) ##

出现了多行元素，控制多行元素的布局**必须要是多行**：   
这里我们假设有十个子元素，下面展示一下不同的属性下子元素的排列方式，父元素有固定的宽和高；

该属性有6个取值：
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

## 2.7 flex-grow属性： ##

.item {
      flex-grow: <number>; /* default 0 */
    }

![f41c08bb35962ed79e7686f735d6cd78.png][]

## 2.8  flex-shring属性： ##

.item {
      flex-shrink: <number>; /* default 1 */
    }

![240d3e960043a729bb3ff5e34987904f.jpg][]

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。                    负值对该属性无效。

# 3、flex应用案例： #

代码：

.container{
                  display: flex;
                  flex-direction: row;
                  align-items: flex-start;
                  justify-content: space-around;
                  flex-wrap: wrap;
                  font-size: 5vw;         /* 5vw ==> 320*5%   1vw == 5% */
              }
              .content{
                  margin-top: 8px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
              }
              .content img{
                  width: 8em;       /* em ==> 父容器的font-size的大小 * 8  */
                  height: 8em;
              }

效果：

在浏览器上切换为手机端，然后查看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 5][]

改变手机端的窗口，效果如下，实现并成一列：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20211207/993f38590ae244ed8e23f5e9ce7d2c40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1]: /images/20211207/796bb85bd44d48d3a48bff2a52d583a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2]: /images/20211207/03f423343faf46cd80868013f160f7b4.png
[20190716223200742.png]: /images/20211207/860e6e0099694d3da151f522fd05eb26.png
[2019071622331729.png]: /images/20211207/e883d5d53ed14853947093f445fd17ba.png
[2019071622342425.png]: /images/20211207/67c56a07fe7d4f2581abe6c46b7f5f43.png
[20190716223950554.png]: /images/20211207/5dc53b18f00d405c82088e51e18dccec.png
[20190716224036503.png]: /images/20211207/0bd60bb4a3f64e87a6a286cf92fec860.png
[20190716224144811.png]: /images/20211207/a0e65ba48d08462a92d1a56049cd7655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 3]: /images/20211207/9be9f558820d49c19ae5607f5b94049f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 4]: /images/20211207/e053ee7c35c440f2b0df70bc69f7e982.png
[f41c08bb35962ed79e7686f735d6cd78.png]: /images/20211207/bdd0f1b97ccb41dc933494f03acaa1ab.png
[240d3e960043a729bb3ff5e34987904f.jpg]: /images/20211207/e8e0dc63aaed496aa96b6dba0aee6166.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 5]: /images/20211207/6d2c3764257c4552932da9c060b5ef97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 6]: /images/20211207/6f2c4ee8a4c44521bb454dd31fbdfd16.png