初识Flex弹性布局

淩亂°似流年 2023-01-18 09:15 14阅读 0赞

> 版权声明：本文为 小异常 原创文章，非商用自由转载-保持署名-注明出处，谢谢！  
> 本文网址：[https://sunkuan.blog.csdn.net/article/details/116355287][https_sunkuan.blog.csdn.net_article_details_116355287]

### 文章目录 ###

*  一、传统法
 *  二、初相识
 *  三、父属性
 *   *  1、flex-direction 属性（主轴方向）
     *   *  1）HTML
         *  2）CSS
         *  3）效果
     *  2、justify-content 属性（在主轴方向上的对齐方式）
     *   *  1）HTML
         *  2）CSS
         *  3）效果
     *  3、align-items 属性（在侧轴方向上的对齐方式）
     *   *  1）HTML
         *  2）CSS
         *  3）效果
     *  4、flex-wrap 属性（是否换行）
     *   *  1）HTML
         *  2）CSS
         *  3）效果
 *  四、子属性
 *   *  1、order 属性（子项目的排序）
     *   *  1）HTML
         *  2）CSS
         *  3）效果

> 一天不写代码就浑身难受，看样子我已经练就了一名程序员必备的职业素养。学习和总结是必备的，对于一名程序员如果想安身立命，必须不断的学习和更进新的技术。趁着这两天没什么事情把前段时间学习的 Flex 弹性布局总结一下吧，利人更利己，大佬请绕道。  
> 　  
> 提起弹性布局，一瞬间的尴尬、无语、羞愧一齐涌上心头，我真想找个地缝钻进去。作为立志成为一名全栈工程师的我居然看不懂前端同事写的 CSS 代码了，让我惭愧不已。  
> 　  
> 好了，话不多说，进入今天的主题吧 —— **《初识 Flex 弹性布局》**。  
> 　  
> （本文只介绍常用的属性，对其他较为复杂且不常用的属性不作介绍，请移步 W3C 相关网站自行学习）

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

# 一、传统法 #

> **网页布局（Layout）** 一直以来是 CSS 中的一个重点应用。在我们网页布局的传统解决方案中，都是基于盒状模型的，依赖于 **display 属性 + position 属性 + float 属性**。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。  
> 　  
> 在 2009 年，W3C 就提出了一种新的方案 —— **Flex 布局**，它可以便捷、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这就意味着，我们可以很安全地使用这项功能。

![传统法][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bjgxMTIxMzM_size_16_color_FFFFFF_t_70_pic_center]

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

# 二、初相识 #

> **Flex** 是 Flexible Box 的缩写，意为 “**弹性布局**”，用来为盒状模型提供最大的灵活性。我们可以为任何一个容器指定为 **Flex 布局**。
> 
>     .box {
>          
>         display: flex;  /* .box 这个元素就变成了弹性盒子 */
>     }
> 
> **注意：** 设为 **Flex 布局** 以后，子元素的 `float`、`clear` 和 `vertical-align` 属性将失效。
> 
> 下面是一张 **Flex 布局** 的模型图：

![Flex布局][Flex]

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

# 三、父属性 #

## 1、flex-direction 属性（主轴方向） ##

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

*  `row`（默认值）：主轴为水平方向，起点在左端；
 *  `row-reverse`：主轴为水平方向，起点在右端；
 *  `column`：主轴为垂直方向，起点在上沿；
 *  `column-reverse`：主轴为垂直方向，起点在下沿。

![flex-direction 属性][flex-direction]

### 1）HTML ###

### 2）CSS ###

/* 父容器 */
    .box {
        
        width: 500px;
        height: 500px;
        background: yellow;
        display: flex;
        flex-direction: column;  /* 垂直排列，起点在上方 */
    }
    
    /* 子项目 */
    .item {
        
        width: 100px;
        height: 100px;
        background: blue;
        margin: 10px;  /* 为了每个子项目分开点距离 */
    }

### 3）效果 ###

![flex-direction 属性][flex-direction 1]

## 2、justify-content 属性（在主轴方向上的对齐方式） ##

*  `flex-start`（默认值）：沿主轴起点对齐；
 *  `flex-end`：沿主轴终点对齐；
 *  `center`：沿主轴居中对齐；
 *  `space-between`：沿主轴空白居中分布，两侧贴边；
 *  `space-around`：沿主轴空白环绕分布；
 *  `space-evenly`：沿主轴空白均分分布。

![justify-content 属性][justify-content]

### 1）HTML ###

### 2）CSS ###

/* 父容器 */
    .box {
        
        width: 500px;
        height: 300px;
        background: yellow;
        display: flex;
        justify-content: space-between;  /* 分散对齐，两侧贴边 */
    }
    
    /* 子项目 */
    .item {
        
        width: 100px;
        height: 100px;
        background: blue;
    }

### 3）效果 ###

![justify-content 属性][justify-content 1]

## 3、align-items 属性（在侧轴方向上的对齐方式） ##

*  `normal`（默认值）：等同于 stretch；
 *  `flex-start`：（常用）沿侧轴起点对齐。（高度随内容撑开）；
 *  `center`：（常用）沿侧轴居中对齐。（高度随内容撑开）；
 *  `flex-end`：（常用）沿侧轴终点对齐。（高度随内容撑开）；
 *  `stretch`：沿侧轴拉伸撑满整个容器。（不设置高度则拉伸，设置高度则固定）；
 *  `baseline`：沿着基线对齐。（高度随内容撑开）。
 *  `space-evenly`：沿主轴空白均分分布。

![align-items 属性][align-items]

### 1）HTML ###

### 2）CSS ###

/* 父容器 */
    .box {
        
        width: 500px;
        height: 300px;
        background: yellow;
        display: flex;
        align-items: flex-start;  /* 分散对齐，两侧贴边 */
    }
    
    /* 子项目 */
    .item {
        
        width: 100px;
        height: auto;
        background: blue;
    }

### 3）效果 ###

![align-items 属性][align-items 1]

## 4、flex-wrap 属性（是否换行） ##

*  `normal`（默认值）：不换行。（子项目在容器中空间不够的话，缩放以适应宽度）；
 *  `wrap`：换行。（设置为换行后，才会按照设置的宽度呈现，空间不够会换行）；
 *  `wrap-reserve`：换行并反转。

![flex-wrap 属性][flex-wrap]

### 1）HTML ###

### 2）CSS ###

/* 父容器 */
    .box {
        
    	width: 300px;
    	height: 400px;
    	background: yellow;
    	display: flex;
    	align-content: flex-start;  /* 这个属性是在侧轴上的对齐方式，flex-start是沿侧轴的起点对齐，一般不常用 */
    	flex-wrap: wrap;  /* 换行 */
    }
    
    /* 子项目 */
    .item {
        
    	width: 100px;
    	height: 100px;
    	background: blue;
    	margin: 10px;
    }

### 3）效果 ###

![flex-wrap 属性][flex-wrap 1]

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

# 四、子属性 #

## 1、order 属性（子项目的排序） ##

> 默认值为 0，只能是整数，值越小越靠前。

![order 属性][order]

### 1）HTML ###

### 2）CSS ###

/* 父容器 */
    .box {
        
    	width: 300px;
    	height: 400px;
    	background: yellow;
    	display: flex;
    }
    
    /* 子项目 */
    .item {
        
    	width: 100px;
    	height: 100px;
    	background: blue;
    	margin: 10px;
    }
    .box > .item:nth-child(1) {
        
        font-size: 26px;
        order: -1;
    }
    .box > .item:nth-child(2) {
        
        font-size: 16px;
        order: -2;
    }
    .box > .item:nth-child(3) {
        
        font-size: 56px;
        order: 1;
    }
    .box > .item:nth-child(4) {
        
        font-size: 36px;
    }
    .box > .item:nth-child(5) {
        
        font-size: 66px;
        order: 2;
    }

### 3）效果 ###

![order 属性][order 1]

*博客中若有不恰当的地方，请您一定要告诉我。前路崎岖，望我们可以互相帮助，并肩前行！*

[https_sunkuan.blog.csdn.net_article_details_116355287]: https://sunkuan.blog.csdn.net/article/details/116355287
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bjgxMTIxMzM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/47b9c46eb47444ebb2a187ded846901a.png
[Flex]: /images/20221021/289fef4cb3c54c36915434bf0a8603d6.png
[flex-direction]: /images/20221021/06b7c97bd8144cbb826b1b71f9ec703e.png
[flex-direction 1]: /images/20221021/abbdddd954d94097a747e41d54e1278a.png
[justify-content]: /images/20221021/458fa3f2fd2249bb97fb2eaa28ed4eee.png
[justify-content 1]: /images/20221021/fe810876ad6744aa8b43902806d002b8.png
[align-items]: /images/20221021/3ac06f35de8e4d35b9198fe23923771f.png
[align-items 1]: /images/20221021/996bba529f6341cc9ab3ba9709355e7b.png
[flex-wrap]: /images/20221021/e370d1dd5f864ec282b6cb2bf920b00c.png
[flex-wrap 1]: /images/20221021/4b26eca1e5b8472c827b5cd158d49c55.png
[order]: /images/20221021/e2595b642d1a420db60eb791991c274f.png
[order 1]: /images/20221021/f76caa4eb22947f3942fef6efb8fa225.png