CSS - Flex

1
2
3
4

/* 使用 flex 布局 */
.box {
  display: flex;
}

Flex 布局的设计思想

main axis 主轴

cross axis 交叉轴

flex container 容器属性

• flex-direction : 主轴的方向
  • row:（默认）左到右
  • row-reverse: 右到左
  • column: 上到下
  • column-reverse: 下到上
• flex-wrap : 换行的情况
  • nowrap:（默认）不换行
  • wrap: 从上往下换行，第一行在上
  • wrap-reverse: 从下往上换行，第一行在下
• flex-flow : 排列方向和换行的简写
  • 格式：<flex-direction> <flex-wrap>
• justify-content : 在主轴上的对齐方式
  • flex-start:（默认）开始位置对齐
  • flex-end: 结束位置对齐
  • center: 居中对齐
  • space-between: 两端空间优先
  • space-around: 空间围绕，类似 padding
  • space-evenly: 空间均分，类似 margin
• align-items : 在交叉轴上的对齐方式
  • stretch:（默认）伸展，项目 height 为 auto，将占满容器交叉轴
  • flex-start: 开始位置对齐
  • flex-end: 结束位置对齐
  • center: 居中对齐
  • baseline: 项目内容第一行文字基线
• align-content : 主轴换行情况下，产生的多条主轴在交叉轴上的对齐方式
  • 可设置值参考 justify-content 属性

flex item 项目属性

• order : 项目的排列顺序，数值小，排列前
  • <integer>，默认 0
• flex-grow : 放大
  • <number>，默认 0，存在剩余空间，也不放大
• flex-shrink : 缩小
  • <number>，默认 1，空间不足，项目缩小
• flex-basis : 在分配多余空间之前，项目占据的主轴空间
  • <length>，默认 auto，项目的本来大小
• flex : 前三个属性的简写，优先使用这个属性。
  • <flex-grow> <flex-shrink> <flex-basis>，默认 0 1 auto
  • 快捷值 auto 即 1 1 auto，none 即 0 0 auto
• align-self : 单独定义对齐方式，覆盖 align-items 的属性
  • auto:（默认）继承父元素的 align-items 属性
  • 其他可设置值参考 align-items 属性