CSS布局（1）-Flex布局

一、Flex布局是什么？

Flex是Flexible Box的缩写，意味“弹性布局”，通过将元素设定为容器，容器内部所包含的子元素称之为Flex项目，也就是容器成员。任何一个容器都可以指定为Flex布局。容器默认存在flex-wrap两根轴，水平的主轴和垂直的交叉轴，项目默认按照主轴排列，即默认按水平排列。

.box {
    display:flex;
}
<!--行内元素也可以使用flex布局-->
.line{
    display:inline-flex;
}

注意：Flex布局后，容器中的子元素的float、clear、vertical-align属性都将失效。

二、容器的属性

样例代码

<div class="div1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

1.flex-direction

flex-direction属性决定主轴的方法（即项目的排列方向）。其对应的属性值如下：

.div1 {
    display:flex;
    flex-direction:row(默认) | row-reverse | column | column-reverse;
}

• row：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

样式展示如下

2.flex-wrap

flex-wrap属性决定当一条轴线排列放不下所有元素时，如何换行。

.div1{
    display:flex;
    flex-wrap:nowrap(默认) | wrap | wrap-reverse;
}

• nowrap：默认，不换行，会适当压缩宽度，保证所有元素都能够正常展示；