超详细的移动端flex布局

flex布局

Flex 布局，可以实现各种页面布局。目前，它已经得到了所有浏览器的支持。Webkit 内核的浏览器，必须加上-webkit前缀。

**

一、flex布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

二、flex布局的概念

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

三、flex布局的属性

1、首先决定是flex主轴方向：flex-direction

• row 水平向右
• row-reverse 水平向左
• column 垂直向下
• column-rrverse 水平向右

2、设置父容器属性，决定子容器主轴排列方式（水平方向）：justify-content

• flex-start 左对齐
• flex-end 右对齐
• center 居中对齐
• space-around 均匀分布，内容靠里
• space-between 均匀分布，内容靠外

3、设置父容器属性，决定子容器的交叉轴排列方式（垂直方向）：align-items

• flex-start 顶部对齐
• flex-end 底部对齐
• center 居中对齐
• baseline 基准线对齐
• stretch 拉伸对齐

4、设置子容器在主轴方向如何伸缩：flex

• 一个值
  1、flex-bases:10em/10px/auto/content
  2、flex-grow:1/2

• 两个值
  1、flex-grow,flex-basic:1,30px
  2、flex-grow,flex-shink:1,1/2,2

• 三个值
  1、flex-grow,flex-shink,flex-basic:1,1,10%

• none
  1、0 0 auto

5、设置子容器交叉轴排列，和父容器align-items完全一致：align-self

• flex-start 顶部对齐
• flex-end 底部对齐
• center 居中对齐
• baseline 基准线对齐
• stretch 拉伸对齐