flex布局 父元素属性之 align

布局 父元素属性之 align"/>

flex布局 父元素属性之 align

align-content

align-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式
注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效

align-content的属性值：

对以上几个属性值进行举例解释（以y轴为侧轴为列）：

flex-start

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	/* 有了换行,故侧轴上的排列方式用align-content */align-content: flex-start;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>

运行结果：子元素从侧轴的头部开始排列

flex-end

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	align-content: flex-end;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>

运行结果：子元素从侧轴的尾部开始排列

center

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	align-content: center;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>

运行结果：子元素在侧轴上居中对齐

space-around

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	align-content: space-around;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>

运行结果：子元素在侧轴上平分剩余空间

space-between

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	align-content: space-between;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>

运行结果：子元素先贴着侧轴的两边，再平分侧轴上的剩余空间

stretch

<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex;	width: 800px;height: 400px;background-color: orange;flex-wrap: wrap;	align-content: stretch;}div span{width: 150px;height: 50px; background: skyblue;margin: 0 10px;}</style>

运行结果：除去子元素所占高度，再平分父元素高度
上述如果没有给子元素设置高度，运行结果为：（没有给子元素设置高度，这两行子元素平分父元素高度）