flex布局的使用

记录一下flex常用的属性

检测css属性兼容

  caniuse.com可以检测css属性的兼容情况。

盒子模型

box-sizing

content-box: 总宽度 = width + padding2 + margin2 + border2
border-box: 总宽度 = width + margin2

flex

父级盒子添加：display: flex;
使用flex布局之后，子元素不需要使用float;

父元素属性

justify-content: 子元素水平排列方式

• center: 居中
• flex-start: 居左
• flex-end: 居右
• space-between: 俩端对齐
• space-around: 俩端与边缘有距离

align-items:      子元素垂直排列方式

• center: 居中
• flex-start: 开始
• flex-end: 底部
• space-between: 俩端对齐
• space-around: 俩端与边缘有距离

align-content: 多行子元素垂直排列方式

• center: 居中
• flex-start: 开始
• flex-end: 底部
• space-between: 俩端对齐
• space-around: 俩端与边缘有距离

flex-direction: 排列方式

• row: 横向
• row-reverse: 横向翻个
• column: 纵向排列
• column-reverse: 纵向翻个

flex-wrap:      子元素是否在一行显示

• nowrap: 不换行
• wrap: 换行

flex-flow:      flex-direction flex-wrap 简写

子元素属性

flex:      子元素宽度系数

flex-grow:      子元素放大比例

align-self:      子元素垂直排列

order:      子元素顺序