flex 下对齐_Flex布局

在没有接触Flex之前一直使用float、display、position 。说实话用起来非常恶心。当使用Flex时，我们可以简洁优雅实现复杂的页面布局

1、Flex 布局？

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.container {
    
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

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

1.1、容器的属性

容器有以下6个属性

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

1.1.1 、flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
    
  flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row，主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿; column-reverse：主轴为垂直方向，起点在下沿;

1.1.2、flex-wrap: 决定容器内项目是否可换行

默认情况下，项目都排在主轴线上不换行，但使用 flex-wrap 可实现项目的换行。

.container {
    
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (默认值)不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
• wrap：项目主轴总尺寸超出容器时换行，第一行在上方
• wrap-reverse：换行，第一行在下方