CSS - felx布局基础知识

CSS - felx布局基础知识

flex布局是目前web开发中使用最多的方案

• flex布局（弹性布局）
• 目前在移动端用的最多，pc端也越来越多
  两个重要概念
• 开启了flex布局的元素叫 flex container
• flex container 里面的直接子元素叫 flex items
  设置display属性为 flex、inline-flex 可形成 flex container
• display: flex container 以 block-level 形式存在（块）
• display: inline-flex 以 inline-level 形式存在（行）

flex相关属性

应用在 flex container上的css属性

• flex-direction (方向主轴）
• justify-content (主轴）
• align-items (交叉轴）
• flex-wrap (多行)
• align-content (多行-交叉轴)
• flex-flow

应用在 flex items上的css属性

• flex
• flex-grow
• flex-basis
• flex-shrink
• order
• align-self

flex-direction

flex i