相关疑难解决方法(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万
查看次数

包裹时,删除多行柔性物品之间的空隙(间隙)

我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.

这是个主意:

我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:

问题是列之间存在很大差距.

我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.

有什么方法可以解决这个问题吗？

这是代码:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

Run Code Online (Sandbox Code Playgroud)

codepen

html css css3 flexbox

j.g*_*ima

2016 12-25

34
推荐指数

1
解决办法

3万
查看次数