相关疑难解决方法(0)

Flex容器中的等高行

如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.

有没有办法实现这一点,而不给出固定高度,只使用flexbox？

这是我的 code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

Jin*_*ian

2019 03-29

61
推荐指数

5
解决办法

7万
查看次数

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万
查看次数