弹性布局-------前端小白总结

弹性布局

父级元素

display:flex(用了弹性布局，无需用float)

父级其他属性：

• justify-content: 子元素水平排列方式
  （center 居中； space-between 两端对齐； space-around 拉手分布； flex-start 居左； flex-end 居右）

• alige-items 单行子元素垂直排列
  （center 居中； flex-start 居左； flex-end 居右）

• align-content 多行子元素垂直排列
  （center 居中； flex-start 居左； flex-end 居右）

• flex-direction 排列方式
  （row 横向排列； row-reverse 横向翻过排列； column 纵向排列； column-reverse 纵向翻过排列）

• flex-wrap 子元素是否在一行显示
  （wrap 换行； no-wrap 不换行）

子级身上属性：

• flex：1
  【 1指的是一个系数（自适应；子元素在划分父元素宽度，先刨除固定宽度）】

• flex-grow：1 定义子元素放大比例

• align-self 其实就是覆盖父级align-items垂直排列
  （center 居中； flex-start 居左； flex-end 居右）

• order 规定子元素顺序，用来排序（数值越小。排列越靠前）

注：（若出现border，margin，padding等属性，养成习惯都需要加上box-sizing：border-box）