flexbox 巩固加深

配合flexbox工具食用更佳

flexbox 支持情况

整体印象

• flex: 0 ( flex-grow ) 1 ( flex-shrink ) auto ( flex-basis ); 默认值-( 属性 )
• flex-basis 控制着元素在沿着主轴上 grow 和 shrik 之前最终能够变化多大
• flex-grow 决定了他将与兄弟元素成比例的增长多少， flex-shrink 决定了缩小多少

flex-direction

• 设置或检索伸缩盒对象的子元素在父容器中的位置
• 默认值 :row
• 适用于 :flex 容器

flex-wrap

• 设置或检索伸缩盒对象的子元素超出父容器时是否换行
• 默认值 :nowrap
• 适用于 :flex 容器

justify-content

• 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
• 默认值 :flex-start
• 适用于 :flex 容器

align-items

• 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
• 默认值 :stretch
• 适用于 :flex 容器

align-items: stretch 时每个 子元素 的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果

如果 div 内没有内容，或者子标签内没有内容，将按照每个 div 的底部对齐

align-content

• 设置或检索弹性盒堆叠伸缩行的对齐方式
• 默认值 :stretch
• 适用于 :多行的弹性盒模型容器

flex-wrap 需设为 wrap, 且数量超出一行, 父容器的高度相对于子容器有多余，才能看到效果

order

• 设置或检索伸缩盒对象的子元素出現的順序
• 默认值 :0
• 适用于 :flex子项和flex容器中的绝对定位子元素

用整数值来定义排列顺序，数值小的排在前面。可以为负值

flex-grow

• 设置或检索弹性盒的扩展比率
• 默认值 :0
• 适用于 :flex子项

<ul class="flex">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<style>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li {text-align:center;height:100px;}
.flex li:nth-child(1){width:200px;background-color:green;}
.flex li:nth-child(2){flex-grow:1;width:50px;background-color:yellow;}
.flex li:nth-child(3){flex-grow:3;width:50px;background-color:red;}
</style>

flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3

flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

• a: 50+(300/4)=200px
• b: 50+(300/4*1)=125px
• c: 50+(300/4*3)=275px

flex-shrink

• 设置或检索弹性盒的收缩比率（与flex-grow相反）
• 默认值 :1
• 适用于 :flex子项

<ul class="flex">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<style>
.flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(1){background:#888;}
.flex li:nth-child(2){background:#ccc;}
.flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
</style>

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

通过收缩因子，所以加权综合可得2001+2001+200*3=1000px；

于是我们可以计算a,b,c将被移除的溢出量是多少：

• a被移除溢出量：(2001/1000)200，即约等于40px
• b被移除溢出量：(2001/1000)200，即约等于40px
• c被移除溢出量：(2003/1000)200，即约等于120px

最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

flex-basis

• 设置或检索弹性盒伸缩基准值
• 默认值 :auto
• 适用于 :flex子项

flex-basis 控制元素的默认尺寸，然后再由其他 Flexbox 属性控制，可以覆盖 width 属性

flex-basis 可以和 width 属性互换

flex-basis 是通过主轴 (main axis) 来影响元素尺寸的

align-self

• 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式
• 默认值 :auto
• 适用于 :flex子项

大部分gif图片转自 ccforward 的 github