flex弹性布局

2024-02-14 16:57:46

伸缩盒子的特性
- 元素一行显示，不脱标
- 分为主轴和侧轴
  - 盒子沿主轴方向排列
  - 主轴默认水平从左到右
  - 侧轴一直垂直于主轴
使用方法
- 父元素属性
  - 设置为伸缩盒子
    - display: flex;
  - 设置主轴对齐方式
    - justify-content: flex-start（默认） | flex-end | center | space-between（两端对齐，中间自适应） | space-around（每个盒子左右外边距自适应）
  - 设置侧轴对齐方式
    - align-items: flex-start | flex-end | center | baseline（基线） | stretch（默认值，拉伸）
  - 设置主轴方向（reverse是翻转的意思）
    - flex-direction: row | row-reverse | column | column-reverse
  - 是否换行显示
    - flex-wrap: nowrap（默认，不换行） | wrap
  - 设置元素换行后的对齐方式
    - align-content: flex-start | flex-end | space-between | space-around | stretch（默认值，拉伸）
- 子元素属性
  - flex 属性定义子元素平均分配剩余空间，该子项目占多少份。
    - .item { flex: <number>; /* default 0 */ }
  - 设置子元素的排序方式（了解）
    - order 属性定义项目的排列顺序。数值越小，排列越靠前，默认0