flex-wrap与align-self、align-items和align-content如何配合工作？

9 浏览
0 Comments

flex-wrap与align-self、align-items和align-content如何配合工作？

align-self

在下面的代码中，align-self 与 flex-wrap: nowrap 一起使用。

enter image description here

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

但是当容器切换到 flex-wrap: wrap 时，align-self 属性失效。

enter image description here

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

align-items

同样地，为什么这里的 align-items 生效（禁用换行）：

enter image description here

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

...但是这里不生效（启用换行）：

enter image description here

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

align-content

使用 flex-wrap: nowrap，align-content 属性无法垂直居中伸缩项：

enter image description here

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

但是，奇怪的是，如果启用换行并且省略 align-content，容器在行之间创建了宽间隙：

enter image description here

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

并且 align-self 再次生效。

enter image description here

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:nth-child(even) {
  align-self: flex-end;
  background-color: crimson;
}

flex-wrap 如何与 align-self、align-items 和 align-content 一起工作？

0

2 答案

0 Comments

flex-wrap属性用于指定flex容器中的项目是否换行。当设置为wrap或wrap-reverse时，项目会根据容器的尺寸自动换行。如果没有使用flex-wrap属性，那么容器中的项目将会在一行内显示。

align-self属性用于设置单个项目在交叉轴上的对齐方式。它可以覆盖align-items属性对所有项目的设置。

align-items属性用于设置所有项目在交叉轴上的对齐方式。它会覆盖flex容器上的align-content属性的设置。

align-content属性用于设置多行项目在交叉轴上的对齐方式。它只有在有多行项目且有额外空间时才会生效，否则不会产生任何效果。

在第一个例子中，由于没有设置wrap属性，所以align-content属性是无效的。

在第二个例子中，由于没有设置额外的空间，所以align-self属性也是无效的。为了使样式生效，我们在项目中添加了一个高度。

同样地，在第四个例子中，如果设置了满足条件的样式，那么样式是有效的。

最后，当我们注释掉align-content属性时，它会恢复为stretch对齐方式，这就是为什么行会增加尺寸以填充容器的原因。

总之，要使flex-wrap属性与align-self、align-items和align-content属性正常工作，需要确保设置了正确的属性值和满足条件的样式。

0
0 Comments

flex-wrap 如何与 align-self、align-items 和 align-content 一起工作？

在使用 flex-wrap 属性时，它看起来非常简单 - 它控制 flex 项目是否可以换行，但实际上它对整个 flexbox 布局产生了广泛的影响。

flex-wrap 属性决定了你将使用的 flex 容器的类型。

- flex-wrap: nowrap 创建一个单行的 flex 容器

- flex-wrap: wrap 和 wrap-reverse 创建一个多行的 flex 容器

align-items 和 align-self 属性在单行和多行容器中都起作用。但是，它们只有在交叉轴上有空闲空间时才会起作用。

align-content 属性只在多行容器中起作用，单行容器中会被忽略。

解决方法：

- 将 flex-wrap 设置为 nowrap，以创建单行的 flex 容器

- 将 flex-wrap 设置为 wrap 或 wrap-reverse，以创建多行的 flex 容器

- 使用 align-items 和 align-self 属性来在交叉轴上对齐 flex 项目

- 使用 align-content 属性来在多行容器中对齐 flex 行

flex-wrap 属性决定了 flex 容器的类型，而 align-items、align-self 和 align-content 属性决定了 flex 项目在交叉轴上的对齐方式。这些属性的组合可以实现不同的布局效果。

0