align-items和align-content之间的区别是什么?
当前回答
对齐项目和对齐内容的效果都是沿着交叉轴。
如果弯曲方向是行，那么主轴就是从左到右的，如果弯曲方向是列，那么主轴就是从上到下的。
在下面的例子中，我们假设弯曲方向是行，即主轴是从左到右，交叉轴是从上到下。
Align-content只有在有flex-wrap: wrap和容器中有多个flex-line时才有效。
如果有多个柔线，对齐内容的优先级高于对齐项。
什么是专线?
伸缩容器中伸缩项的每一行或每一列都是一条伸缩行。当容器中没有足够的空间时，就会出现多行，而flex项目将使用下一行(在flex方向:row;)来放入。在flex-direction:列中，它会将伸缩项添加到下一行。
例子
默认情况下，flex是一个灵活的容器，即它可以容纳任意数量的元素，除非我们指定了flex-wrap: wrap。如果没有wrap, flex-items将溢出容器(如果flex-direction为row)。
align-content例子
.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
在上面的例子中，如果有flex-wrap: no-wrap，那么align-content不会影响我们的布局。
对齐项目例子
align-items属性确定伸缩项如何沿交叉轴在伸缩线内定位。
.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-items: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
如果align-content和align-items被声明在具有flex-wrap: wrap属性的容器上，如果有多个flex-line，则align-content属性的优先级高于align-items。
align-content and align-items priority example .container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-start; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
其他回答
对齐项目和对齐内容的效果都是沿着交叉轴。
如果弯曲方向是行，那么主轴就是从左到右的，如果弯曲方向是列，那么主轴就是从上到下的。
在下面的例子中，我们假设弯曲方向是行，即主轴是从左到右，交叉轴是从上到下。
Align-content只有在有flex-wrap: wrap和容器中有多个flex-line时才有效。
如果有多个柔线，对齐内容的优先级高于对齐项。
什么是专线?
伸缩容器中伸缩项的每一行或每一列都是一条伸缩行。当容器中没有足够的空间时，就会出现多行，而flex项目将使用下一行(在flex方向:row;)来放入。在flex-direction:列中，它会将伸缩项添加到下一行。
例子
默认情况下，flex是一个灵活的容器，即它可以容纳任意数量的元素，除非我们指定了flex-wrap: wrap。如果没有wrap, flex-items将溢出容器(如果flex-direction为row)。
align-content例子
.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
在上面的例子中，如果有flex-wrap: no-wrap，那么align-content不会影响我们的布局。
对齐项目例子
align-items属性确定伸缩项如何沿交叉轴在伸缩线内定位。
.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-items: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
如果align-content和align-items被声明在具有flex-wrap: wrap属性的容器上，如果有多个flex-line，则align-content属性的优先级高于align-items。
align-content and align-items priority example .container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-start; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>
主要的区别是元素的高度不一样! 然后你可以看到在一行中，它们都是中心\结束\开始
来自flexboxfroggy.com的例子:
这将花费你10-20分钟，在21级你会找到你的问题的答案。
Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时，align-content没有作用
首先，align-items用于单行中的项目。因此，对于主轴上的单行元素，align-items会将这些元素各自对齐，并从下一行的新视角开始。
现在，align-content不会干扰一行中的项，而是会干扰行本身。因此，align-content将尝试根据彼此和flex容器对齐行。
检查这个小提琴:https://jsfiddle.net/htym5zkn/8/
flex-box的align-items属性将伸缩容器内的项目沿交叉轴对齐，就像justify-content沿主轴对齐一样。(对于默认的flex-direction: row，交叉轴对应于垂直，主轴对应于水平。对于flex-direction:列，这两个分别交换)。
下面是align-items:center的示例:
但align-content适用于多线柔性盒子。当项目在一行中时，它不起作用。它根据值调整整个结构。下面是一个align-content的例子:
这是align-content: space-around;使用align-items:center looks:
请注意，第一行中的第三个方框和所有其他方框都在该行中垂直居中。
下面是一些代码依赖的链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超级酷的笔，它可以显示并让你在flexbox中玩几乎所有的东西。
