flex 布局

flex 布局

传统布局 与 flex 布局

传统布局

• 兼容性好
• 布局繁琐
• 局限性

flex 弹性布局

• 操作方便布局简单
• PC 端浏览器支持情况比较差
• IE 11 或更低版本，不支持或仅部分支持

注：移动端设置最小宽度一般 320px

布局原理

flex 是 flexible Box 的缩写，意味 弹性布局，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

当我们为父盒子设为 flex 布局以后，子元素的 float, clear, vertical-align 属性将失效

采用 flex 布局的元素称为 Flex 容器 (flex container)，其子元素自动成为容器成员，称为 Flex 项目 (flex item)

总结 flex 布局原理：

  就是通过给 Flex 容器添加 flex 属性，控制 Flex 项目的位置和排列方式

常见属性

flex 布局父选项

• flex-direction: 设置主轴方向

  • row: 从左到右
  • row-reverse: 从右到左
  • column: 从上到下
  • column-reverse: 从下到上

• justify-content: 设置主轴子元素排列

  • flex-start: 从头部开始
  • felx-end: 从尾部开始
  • center: 居中
  • space-around: 均分
  • space-between: 先两边贴边，再均分

• flex-wrap: 设置子元素是否换行

  • nowrap: 不换行，默认
  • wrap: 换行

• align-items: 设置侧轴的子元素排列 【单行】

  • flex-start: 从头部开始
  • felx-end: 从尾部开始
  • center: 居中
  • stretch: 拉伸【不要给高度】，默认

• align-content: 设置侧轴的子元素排列 【多行】

  • flex-start: 从头部开始
  • felx-end: 从尾部开始
  • center: 居中
  • space-around: 均分
  • space-between: 先两边贴边，再均分
  • stretch: 拉伸【不要给高度】

• flex-flow: 复合属性 (flex-direction, flex-wrap)

主轴与侧轴默认指的是 X 轴, Y 轴

• 主轴: 水平向右
• 侧轴: 水平向下

flex 布局子选项

• flex: 子项目占份数
• align-self: 控制子项目自己在侧轴的排列方式
• order: 定义项目排列顺序，数值越小排列越靠首，默认 0