Question

我在弹性盒子里有3个不同长度的div。每个div的宽度为47％。我正在使用柔性包装让它们包裹。最长的div在顺序中排在第二位，并将第三个div一直推到结束位置。反正有没有第三个div在第一个div下面。

HTML

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

.flex-box{
  display: flex;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
  align-items: flex-start;

}
.flex-item{
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

Answer 1

要使用单个容器垂直和水平排列项目，请使用grid而不是flex - 这就是它的用途！

以下是grid解决方案的CSS，其中HTML保持不变：

.flex-box{
  display: grid;
  grid-template-columns: 47% 47%;
  grid-template-rows: 78px auto;
  background: black;
  width: 500px;
  justify-content: space-between;
  align-items: start;

}
.flex-item{
  width: 100%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

.flex-item:nth-of-type(2) {
  grid-row-start: span 2;
}

您可能希望更改/添加HTML中的类，以避免摆弄nth-of-type。

Answer 2

按以下方式重新排列//************************************************************** // Testing program for VCP program (temporary). // // @aaron_ford // @version_1.0_11.9.17 //************************************************************** public class VCPTest { public static void main(String[] args) { System.out.println("Enter a string."); String user_str = "a vowel is here"; System.out.println("You entered: " + user_str); char vowels[] = {'a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'}; // counter variables int v_counter = 0; int c_counter = 0; int s_counter = 0; int p_counter = 0; int count = 0; int str_compare = user_str.charAt(count); for (; count < str_compare; count++) { str_compare = user_str.charAt(count); for (int a:vowels) { if (a == str_compare) { v_counter++; } } } System.out.println("There are " + v_counter + " vowels."); System.out.println("There are " + c_counter + " consonants."); System.out.println("There are " + s_counter + " spaces."); System.out.println("There are " + p_counter + " punctuation marks."); } }。

class="flex-item"

然后只需将<div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> //Longest div container提供给容器即可。并且不要忘记将flex-direction:column提供给您的容器。

max-height:(Anything less than your container height)

.flex-box {
  display: flex;
  flex-direction: column;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  max-height: 520px;
  justify-content: space-between;
}

.flex-item {
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

长包裹的柔性物品推动其他人下来

2 个答案: