前端Flex弹性盒子作业，容器的六个属性及其使用

传统float与position布局作业小结：

1.尽量使用语义化标签。
2.能用position解决的不用float。
3.css选择器尽量用父子选择器。
4.img空白边线处理 display:block。

flex容器的六个属性

1、flex-direction决定主轴的方向，即项目的排列方向。

*row(默认值)：主轴为水平方向，起点在左端。

.items{
flex-direction:row;
}

*row-reverse:主轴为水平方向，起点在右端。

.items{
flex-direction: row-reverse;
}

*column:主轴为垂直方向，起点在上沿。

.items{
flex-direction:column;
}

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

.items{
flex-direction:column-reverse;
}

2、flex-wrap默认情况下，项目都排列在一天线（又称“轴线”）上。flex-wrap属性定义，如果一条线排列不下，是否换行。

*nowrap:默认情况，不换行。

.items{
flex-wrap:nowrap;
}

*wrap:换行，第一行在上方。

.items{
flex-wrap:wrap;
}

*wrap-reverse:换行，第一行在上方。

.items{
flex-wrap:wrap-reverse;
}

3、flex-flow属性是flex-directiong和flex-wrap属性的简写形式，默认值为row nowrap

.items{
flex-flow: row nowrap;
}

4、justify-content属性定义了项目在主轴上的对齐方式。

*flex-start:默认值，左对齐

.items{
justify-content:flex-start;
}

*flex-end：右对齐

.items{
justify-content:flex-end;
}

*center:居中对齐

.items{
justify-content:center;
}

*space-between:两端对齐，项目之间的间隔相等。

.items{
justify-content:space-between;
}

*space-around:每个项目两侧的间隔相等。

.items{
justify-content:space-around;
}

5、align-items项目在交叉轴上的对齐方式

*flex-start：与交叉轴的起点对齐

.items{
align-items:flex-start;
}

*flex-end：与交叉轴的终点对齐

.items{
align-items:flex-end;
}

*center:与交叉轴的中点对齐

.items{
align-items:center;
}

*baseline:项目第一行的中线对齐

.items{
align-items:baseline;
}

*stretch:占满整个容器

.items{
align-items:stetch;
}

6、align-content属性多根轴线的对齐方式。

*flex-start:与交叉轴的起点对齐。

.items{
align-content:flex-start;
}

*flex-end：与交叉轴的终点对齐

.items{
align-content:flex-end;
}

*center:与交叉轴的中点对齐

.items{
align-content:center;
}

*space-between:与交叉轴两端对齐。

.items{
align-content:space-between;
}

*space-around：每根轴线两侧的间隔都相等。

.items{
align-content:space-around;
}

*stretch：默认值，轴线占满整个交叉轴。

align-content:stretch;