相关疑难解决方法(0)

flex-wrap如何使用align-self,align-items和align-content？

`align-self`

在以下代码中,align-self使用flex-wrap: nowrap.

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;
}

Run Code Online (Sandbox Code Playgroud)

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Run Code Online (Sandbox Code Playgroud)

但是当容器切换到时flex-wrap: wrap,align-self属性会失败.

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: …

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

Mic*_*l_B

lucky-day

56
推荐指数

2
解决办法

2万
查看次数