【布局】flex布局

flex布局

01. flex的介绍

• 对比:

  • 传统布局：
    • 兼容性好、布局繁琐、浮动（清除浮动）
    • 有局限性不能在移动端很好的布局
  • flex布局：
    • 操作方便，布局极其简单，移动端使用比较广泛
    • PC端浏览器支持情况比较差

• 使用：

  • 如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的PC端则采用flex布局；

• 特点：

  • 任何一个标签都可以指定使用 flex 布局。
  • 当为父标签设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素，
  • flex通过行和列的思路来控制布局；

• 名称：

  • 采用 flex 布局的元素，称为 flex 容器（flexcontainer），父级简称"容器"。
  • 它的所有子元素自动成为容器成员，称为 flex 项目（flexitem），简称"项目"。

• 语法&#x