【CSS3基础-Flex布局】

关于Flex

背景

在flex布局出现以前，常用的水平和垂直居中对齐方式有很多。flex布局的出现基本规范了这一过程。

通过justify-content和align-items两个属性即解决了水平居中、垂直居中、水平垂直混合居中的问题。

display:flex

应用在父元素的属性

• flex-flow：flex-direction flex-wrap;
• align-items;
• justify-content;
• align-content(多行模式)

flex-flow

align-items

• stretch
  
  align-items默认值为stretch。其含义即如果指定侧轴宽度未定义或auto时，所有子项目边距盒的宽度伸缩尽可能接近行宽度。这里的行宽度不一定由子项本身，而是由同级某个最大宽度子项宽度所决定。

// 可以实现不同大小的图片显示固定高度
<div class="imgs">
<div class="wrapper">
<img>
</div>
<div class="wrapper">
<img>
</div>
</div>
.imgs{
display: flex;
align-items: stretch;
}
.imgs .wrapper img{
height: 100%; // 使用flex后 直接设置高度100%可生效，不用一层一层向下传递
}

应用在子元素的属性

• flex: flex-grow flex-shrink flex-basis;
• align-self 默认继承自父元素align-item,父元素无时默认为stretch;
• order 对子项进行排序 正序排列；

定位后的flex子项

定位后的flex子项不再继承flex属性，但是其内部依旧可以使用flex布局。