flex的基本属性

flex的基本属性总结

flex布局

• 主轴就是Y轴（重上到下）交叉轴就是X轴（重左到右）也可以通过属性更改 主轴是X轴 交叉轴就是Y轴

  flex-direction 决定元素的配列方向(主轴方向)

  row(默认主轴横向排列)column（主轴纵向排列）

  flex-warp 决定元素如何换行（排列不下的时候）

  wrap(不换行)nowrap（换行）

  justify-content 元素在主轴的对齐方式

  justify-content: flex-start; 所有子元素居左
  justify-content: center;所有子元素居中
  justify-content: flex-end;所有子元素居右
  space-between;中间边距平均分配给子元素
  space-around;两端对齐元素间隔一样

  align-items 元素在交叉轴的对齐方式

  align-items: flex-start;子元素上对齐
  align-items: flex-end;子元素下对齐
  align-items: center;子元素居中对齐
  align-items: baseline;子元素文字下(文字的底部对齐)基准线对齐
  align-items: stretch;子元素文字上(文字的顶部对齐)基准线对齐并且会占满容器高度在没设置高度的时候

---

align-self定义元素自身的对齐方式

align-self: center;单独定义子元素居中对齐

• flex-grow 当空间多余时 元素方法的比列
• flex-shrink 当空间不足元素缩小的比例
• flex-basis 元素在主轴上占据的空间
• order定义元素排列的顺序

赏

谢谢你请我吃糖果

支付宝

微信