伸缩布局

传统布局和伸缩布局

代码演示

<div class="father"> 
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

.father {
width: 900px;
height: 200px;
border: 1px solid red;
box-sizing: border-box;
}

flex-flow:=flex-wrap: + flex-direction:
- 简写属性
flex-wrap:控制子元素是否换行显示，默认不换行
- nowrap不换行，仍然收缩显示
- wrap换行
- wrap-reverse翻转(不常用)
flex-direction:设置子元素的排列方向
- 就是用来设置主轴(默认横轴)方向
  - 默认主轴方向是row
  - 我们来试一下
- 值
  - row水平方向排列，从左至右
  - row-reverse水平方向排列，从右至左
  - column垂直方向排列，从下至上
  - column-reverse垂直方向排列，从上至下
flow-grow:可以来扩展子元素的宽度
- 对子元素进行设置
- flow-grow:的默认值为0:说明子元素不会去占据剩余的空间
- 具体是用来设置当前元素占据剩余空间的比例值
- 比例值计算 : (当前空间的flex-grow)/(所有兄弟元素的flex-grow的和)
代码演示
- 去掉4，5两个盒子
- 给盒子1添加属性flex-grow:1
- 盒子1吸收掉了所有的剩余空间
- 给盒子1，2，3都添加属性flex-grow:1
- 三个盒子均等分了剩余空间

flex-shrink定于收缩比例，通过设置的值来计算收缩空间
- 默认值为1
- 值为1时，将不去承担收缩比例
- 具体是用来设置当前元素收缩的比例值
- 比例值计算:(当前元素的flex-shrink)/(所有兄弟元素的flex-shrink的和)
代码演示
- 我们将父元素宽度改为500px
- 现在每个盒子都只有166px大小了
- 我们将盒子1设置属性flex-shrink:1
- 盒子并无变化，因为其默认值本来就是1
- 现在我们将盒子1设置属性flex-shrink:2
- 盒子1变成了149px大小
- 盒子2，3变成了174.5px
- 盒子1收缩程度占据了两份，盒子2，3收缩程度占据了一份
- 现在我们将3个盒子属性都设置为flex-shrink:0
- 页面发生了伪溢出(谨慎设置)

flex = flow-grow + flex-shrink + flex-basis
- 简写属性
- 默认值为 0 1 auto
- 后两个属性为可选属性
- flex一般是用来设置伸缩子项占据剩余空间的比例值(常用)