CSS flex属性的理解

如果我们使用过flex布局或者熟悉flex布局的话，肯定对flex属性不陌生。但其实flex属性还是很难理解的，我平时用的多，但是原理还是模糊的，所以在这里详细整理一下。

一、flex属性是一种简写

flex是flex-grow，flex-shrink，flex-basis的简写。

那么问题来了，flex-grow，flex-shrink，flex-basis又分别是什么意思呢？

• flex-grow：容器有剩余空间时的分配比例，默认值是0，默认不分配。
• flex-shrink：容器发生收缩时的子元素收缩比例，默认值是1，会发生收缩。
• flex-basis：容器内子元素的初始大小。默认值是auto。

我们可以打印查看flex元素的初始值：

二、flex的语法

语法

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

所以根据上面的语法，以下的写法都是支持的

flex: auto;
flex: none;
/* 1个值，无单位的数字，flex-grow */
flex: 1;
/* 1个值，flex-basis */
flex: 100px;
/* 2个值，flex-grow和flex-basis */
flex: 1 100px;
/* 2个值，flex-grow和flex-shrink */
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;

1个值

• 一个无单位数：它会被当做flex: 1 0; flex-shrink的值默认为1，flex-basis的值默认为0。
• 一个有效的宽度(width)值：它会被当做flex-basis的值，flex-grow和flex-shrink默认为1。
• 关键字none，auto，initial。

2个值

第一个值必须是一个无单位的数，并且它被当做flex-grow的值

• 一个无单位数：它会被当作flex-shrink的值。
• 一个有效宽度值：它会被当做flex-basis的值。

3个值

• 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
• 第二个值必须为一个无单位数，并且它会被当作 flex-shrink的值。
• 第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值。

关键字属性

initial

初始值。等同于设置 flex: 0 1 auto;

不会增长变大占据flex容器中额外的剩余空间（flex-grow:0），会收缩变小以适合容器（flex-shrink:1），尺寸根据自身宽高属性进行调整（flex-basis:auto）。

案例：

html和css核心代码：

<div class="flex-container">
        <div class="flex-item">
            我是谁
        </div>
        <div class="flex-item">
            我从哪里来
        </div>
        <div class="flex-item">
            我要去哪里
        </div>
 </div>

.flex-container {
      display: flex;
  }

auto

等同于设置 flex: 1 1 auto;

子项会增长变大占据flex容器中额外的剩余空间（flex-grow:1），会收缩变小以适合容器（flex-shrink:1），尺寸根据自身宽高属性进行调整（flex-basis:auto）。

案例：

html和css核心代码：

<div class="flex-container">
        <div class="flex-item">
            我是谁
        </div>
        <div class="flex-item">
            我从哪里来
        </div>
        <div class="flex-item">
            我要去哪里
        </div>
 </div>

.flex-container {
     display: flex;
 }
.flex-container .flex-item {
     flex: auto;
 }

none

等同于设置 flex: 0 0 auto;

子项会不会增长变大占据flex容器中额外的剩余空间（flex-grow:0），也不会收缩变小以适合容器（flex-shrink:0），尺寸根据自身宽高属性进行调整（flex-basis:auto）。

案例：

html和css核心代码：

<div class="flex-container">
        <div class="flex-item">
            我是谁
        </div>
        <div class="flex-item">
            我从哪里来
        </div>
        <div class="flex-item">
            我要去哪里
        </div>
 </div>

.flex-container {
     display: flex;
 }
.flex-container .flex-item {
     flex: none;
 }

好，本文内容就这么多了。