CSS学习笔记 —— flex 弹性盒子布局

1、启用弹性盒子

1. display:flex
2. display:inline-flex

2、父元素属性

1. flex-direction 排列方式
  • row 从左到右横向排列（默认值）
  • row-reverse 从右到左横向排列
  • column 纵向排成一列
  • column-reverse 从下往上排成一列
2. flex-wrap 换行选项
  • nowrap 溢出时不换行
  • wrap 换行
  • wrap-reverse 反转warp排列
3. justify-content 横轴对齐方式
  • flex-start 向行起始位置对齐
  • flex-end 向行结束位置对齐
  • center 居中对齐
  • space-between 平均贴边分布，若只有一个元素，靠左
  • space-around 平均留空分部，若只有一个元素，居中
4. align-items 纵轴对齐方式
  • flex-start 向纵轴起始位置对齐
  • flex-end 向纵轴结束位置对齐
  • center 中间对齐
  • baseline
  • strech 伸展
5. align-content 堆叠伸缩行对齐方式
  • flex-start 向起始位置堆叠
  • flex-end 向结束位置堆叠
  • center 中间堆叠
  • space-bwtween 平均贴边分部
  • space-around 平均留空分部
  • stretch 伸展

3、子元素属性

1. order 定义排序
2. flex-grow 剩余空间分配比例
3. flex-shrink 超量空间收缩比例
4. flex-basis 伸缩基准值
5. flex 复合属性 flex:grow shrink basis
6. align-self 自身纵轴对齐方式

版权声明：本文为wzdxy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wzdxy/p/5320773.html