帮你搞定Flex布局！！！

突然接到H5适配移动端的任务，用flex布局吧。

flex布局。。。嗯？听说过，好像也看过，还是好想问：它到底是啥？？? 。。。

在大致了解后，开始做项目，项目是做完了，对flex的属性、参数啊还是云里雾里。。。这不，马上来了个了断 ^ 0 ^

-------------------------------------------------- 咳咳咳 正题分界线 --------------------------------------------------

一、什么是flex？

一张图直观地了解flex的主要概念：

理解容器、项目、主轴线、交叉轴线这几个概念后就上手实用吧！

简单说明：
在flex的容器中默认存在两条轴，水平主轴main axis和垂直交叉轴cross axis，这是默认的设置。需要注意的是：主轴和交叉轴的方向是可以设置的。

flex容器

.root{
    display: flex | inline-flex;  // 两个值都可以使用
}

上述的两个值可以分别生成一个块级flex容器盒子、一个行内flex容器盒子

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

初始代码

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

.box {
	display: flex;
}

二、容器配置

有以下六种常用属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

接下来逐一进行介绍。

1、flex-direction

用来设置容器的主轴方向和主轴线的起点。

.box {
  flex-direction: row; //（默认值）主轴为水平方向，起点在左侧
  flex-direction: row-reverse ;//主轴为水平方向，起点在右侧
  flex-direction: column;//主轴为垂直方向，起点在顶部
  flex-direction: column-reverse;//主轴为垂直方向，起点在底部
}

2、flex-wrap

用来设置如果一条轴线上排满了是否换行。

.box{
  flex-wrap: nowrap; //（默认值）设置不换行
  flex-wrap: wrap;//换行，按顺序第一行从交叉轴线起点端开始排列
  flex-wrap: wrap-reverse;换行，但是被后来居上了，第一行从交叉轴线结束端开始排列
}

3、flex-flow

是flex-direction和flex-wrap属性的简写。
默认值为flex-flow:row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4、justify-content

用来设置项目在主轴方向的排列方式。

.box {
   justify-content: flex-start;//（默认值）主轴线起点对齐
   justify-content: flex-end;//主轴线终点对齐
   justify-content: center;//主轴线中心对齐
   justify-content: space-between; //主轴上左右两边不留空隙，项目间距相等
   justify-content: space-around;//主轴上左右两边留空隙,项目两侧间距相等，所以项目间距是两端间距2倍
   justify-content: space-evenly; //项目间距相等，与两端间距也相等
 }

5、align-items

用来设置项目在交叉轴上的排列对齐方式。

.box {
  align-items: flex-start;//在交叉轴的起点对齐
  align-items: flex-end;//在交叉轴的终点对齐。
  align-items: center;//在交叉轴居中对齐。
  align-items: baseline;//在交叉轴上的第一行文字的基线对齐。
  align-items: stretch;//如果项目未设置高度或设为auto，将占满整个容器的高度。
}

6、align-content

用来设置多轴线在交叉轴线上的对齐方式，只对多轴线起作用。

.box {
  align-content: flex-start;//各行向弹性盒容器的起始位置堆叠。
  align-content: flex-end;//各行向弹性盒容器的结束位置堆叠。
  align-content: center;//各行向弹性盒容器的交叉轴中心位置堆叠。
  align-content: space-between;//与交叉轴两端对齐
  align-content: space-around;//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  align-content: stretch;//(默认值)各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
}

建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap

三、项目配置

有以下六种常用属性：

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

接下来逐一进行介绍。

1、order

定义项目在容器中的排列顺序，值越小越靠前。所以要想不改变其他项目的同时，往前面移动该项目，需要设置成负数。

.item {
  order:number; //default 0 
}

2、flex-basis

定义了在分配多余空间之前，项目占据的主轴空间。

.item {
  flex-basis: length | auto; // default auto
}

默认值：auto，即项目本来的大小。
当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。
当 flex-basis 值为 auto 时，则根据尺寸的设定值(假如为 100px)，这 100px 不会纳入剩余空间。

3、flex-grow

用来定义项目的放大比例，也就是对剩余空间的分配能力。默认值是0，表示不参与分配。如果是2则表示比1的多分配1倍。

.item {
  flex-grow: number; // default 0 
}

4、flex-shrink

定义项目的缩小比例，如果项目空间不足，将默认缩小（值为1），值为0（不缩小），值越大，压缩效果越大。

.item {
  flex-shrink: number; // default 1
}

5、flex

flex-grow、flex-shrink、flex-basis三个属性的缩写。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6、align-self

用来设置单个项目交叉轴上的对齐方式，能覆盖align-items的属性值。默认值为auto，其他值则与align-items相同。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考文章
作者：搁浅
原文地址：https://segmentfault.com/a/1190000020232010

作者：caoweiju
原文地址：https://segmentfault.com/a/1190000019525081