flex布局的align-items与align-content

Flex布局是平常中最常使用的布局方式之一

使用方式：

display:flex;

align-items根据flex布局中的副轴布局
常用align-items的属性：

属性值	描述
flex-start	让元素在副轴的首位
flex-end	让元素在副轴的末尾
center	让元素在副轴的中间

该文章主要描述的是align-content，并且与align-items的区别

align-content首先根据MDN的文档的描述

align-content也是用于flex布局的，但是 所谓的对于单行的弹性盒模型无效，指的是该弹性盒模型使用了flex-wrap:nowrap属性。
这句话的意思很简单：就是， align-content生效与否取决于flex-wrap:nowrap属性，而非页面上看到的单行

！！！flex-wrap的默认值是nowrap。

Demo效果验证这句话：

//页面大体结构就不写了，主要写元素结构
<main>
	<div></div>
	<div></div>
	<div></div>
<main>

<style>
main{
	width:50vw;
	height:80vh;
	display:flex;
	flex-direction: row;
    justify-content: space-between;
    align-content: center;//使用align-content属性
    flex-wrap: wrap;//关键
    border:1px solid red;
}
main div{
	width:5vw;
	height:5vw;
	background:green;
}
</style>

很明显，现在是单行，但是align-content仍然是生效的，因为 flex-wrap的值是wrap。
如果flex-wrap的值是nowrap的话，那么align-conten是不生效的。

在效果上，看起来与align-items差不多。那是因为align-items效果是偏向单行的，而align-content偏向于整个flex元素。

align-content的作用，与align-items的区别

align-content是控制flex布局中的元素整体的位置
属性：

属性值	描述
stretch	让每行、列元素在flex模型上自动拉伸
flex-start	让每行、列元素在flex模型的首位
flex-end	让每行、列元素在flex模型的末尾
center	让每行、列元素在flex模型的中间
space-around	让每行、列元素在flex模型中平均分布，与边框带有间距
space-between	让每行、列元素在flex模型中平均分布，与边框没有间距

align-items是控制当前行、列中的元素位置。

---

<main>
	<div></div>
	<div style="height:10vw;"></div>
	<div></div>
<main>

<style>
main{
	width:50vw;
	height:80vh;
	display:flex;
	flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    border:1px solid red;
}
main div{
	width:5vw;
	height:5vw;
	background:green;
}

align-items:flex-end;元素位于该行的底部，这里就不演示了。

如果flex-wrap:nowrap的话，直接使用align-items控制元素的位置，因为flex-wrap:nowrap表示的是当前flex布局只有一行。

---

关于align-content平时遇到的问题就是flex布局，换行了之后，行与行之间有着较大的间距。
例如

	<main>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </main>
    <style>
        main{
            width: 50vw;
            height: 80vh;
            border: 1px solid red;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        main li{
            width: 5vw;
            height: 5vw;
            background-color: green;
            list-style: none;
            border: 1px solid black;
        }
    </style>

效果图：

这是因为align-content: stretch ;作怪，stretch 是默认值，将每行的布局自动拉伸间距；
要解决这个问题，只需要加上align-content: flex-start;即可。

效果图