flex:1到底是什么

flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。

flex:1 ==> flex:1 1 auto

flex-grow
flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目。flex-grow设置的值为扩张因子，默认为0，剩余空间将会按照这个权重分别分配给子元素项目。

例如：父元素的宽度为500px，其中有两个元素A和B，A的宽度为100px，B的宽度为150px。假如不设置flex-grow属性，那么父元素的剩余宽度为500-(100+150)=250px。

        
100px
        
150px



        #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
        }

假如A、B元素分别设置flex-grow的权重为a、b，那么A、B元素分别得到的剩余空间为250 * a/(a+b)、250 * b/(a+b)。

例：设置A的flex-grow为2，B的flex-grow为3，那么A元素的总宽度为100+250 * 2/(2+3)=200px，B元素的总宽度为150+250 * 3/(2+3)=300px。

        #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
            flex-grow: 2;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
            flex-grow: 3;
        }

CSS flex布局（弹性布局/弹性盒子）

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。

1. 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

提示：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

CSS 中提供了以下属性来实现 Flex 布局：

按照作用范围的不同，这些属性可以分为两类，分别为容器属性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和项目属性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。下面就来介绍一下这些属性的使用。

2. 容器属性

1) flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

示例代码如下：

1. html>
2. lang="en">
7. id="main">
8. class="row">
9. A
   B
   C
   D
   E