CSS - Flex（一）

flex 属性值可以包含三个参数：flex-grow，flex-shrink 和 flex-basis。

第二个和第三个参数（flex-shrink 和 flex-basis）可选。

当flex属性值取两个参数的时候。默认指定的是第一个参数和第三个参数值。如下述：

.flex-item {
 
  /* 此属性值设置 */
  flex: 1 100px;
 
  /* 等同于 */
  flex-grow: 1;
  flex-basis: 100px;
}

通过这个例子验证下边的属性：

    
One
    
Two
    
Three

.box {
    width: 250px;
    height: 35px;
    border: 1px solid #555;
    font: 14px Arial;
    display: flex;
    flex-direction: row;
}

.box > div {
    flex:auto;
    /* 接下来修改这个属性值测试 */
}

.box > div:nth-child(1) {
    background-color: #D3D3D3;
}

.box > div:nth-child(2) {
    background-color: #EEB4B4;
}

.box > div:nth-child(3) {
    background-color: #ADD8E6;
}

设容器 box 下的每个div项目的 flex 初始值为 auto 。

依次修改下述属性值：

 

1. flex: none 

等同于 flex: 0 0 auto

这时候容器完全不再灵活。即不能放大也不能缩小。

该属性和 flex:initial （下方）很类似，除了它不允许 flex-shrink 属性（不能缩小），即使元素可能会溢出。

如果让容器 box 里的flex元素呢内容超过 box 容器预设宽度。元素会溢出。 

 

2. flex: 0 auto 

等同于 flex: initial.  默认值为flex: 0 1 auto。

此时，当容器剩余一些空闲空间时，该属性使灵活的项目变得不灵活，因为其不能自由拉伸放大。

但是当容器没有足够的空间时，该属性允许其缩小到项目的最小值。

因为空间不足第三个 div 缩放到除去其他元素所占空间的最小值，主轴上不会溢出。

 

3. flex: auto 

等同于 flex: 1 1 auto 

这个时候，该属性使项目完全灵活，它们能够吸收主轴上额外的空间。既可以自由放大也可以自由缩小。

 

4. flex:  <意为正数>

等同于 flex:   1  0px 

当 flex 取值为一个非负数字，则该数字为 flex-grow 的值，flex-shrink 取 1，flex-basis 取 0%。

这个时候，该属性使弹性项目变得灵活，flex元素在主轴方向上的初始大小flex-basis为零。

项目将根据容器的大小按照自身的比例自由伸缩。

 

5. flex:   xxpx || xx%

等同于 flex:   1  xxpx || xx% 

该属性和上边的CSS案例一致，即 当 flex 取值为一个非负数字和一个长度（px）或百分比（%），

则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 默认取 1。

 

转自：https://blog.csdn.net/AsheAndWine/article/details/78890640