Flexbox - 连续对齐2个项目，下一行全宽对齐第三个项目

Question

我连续三件事。我想保留前两行50％50％的行，然后将下一个第三项推到下一行并覆盖行的100％。

np.random.seed(234)

df = pd.DataFrame(np.random.randint(5, size=(5,5)))
print (df)
   0  1  2  3  4
0  0  4  1  1  3
1  3  0  3  3  2
2  0  2  4  1  3
3  4  0  3  0  2
4  3  1  3  3  1

mu, sigma = 0, 0.1
a = np.random.normal(mu,sigma, size=df.shape)
print (a)
[[ 0.10452115 -0.01051424 -0.13329652 -0.06376671  0.07245456]
 [-0.21753186  0.05700441  0.03595196 -0.08154859  0.0076684 ]
 [ 0.08368405  0.10390984  0.04692948  0.09711873 -0.06820933]
 [-0.07229613  0.03954906 -0.06136678 -0.02328597 -0.22123564]
 [-0.04316055  0.05945377  0.13736261  0.07895045  0.03714287]]

df = df.where(df == 0, df.add(a))
print (df)
           0         1         2         3         4
0  0.000000  3.989486  0.866703  0.936233  3.072455
1  2.782468  0.000000  3.035952  2.918451  2.007668
2  0.000000  2.103910  4.046929  1.097119  2.931791
3  3.927704  0.000000  2.938633  0.000000  1.778764
4  2.956839  1.059454  3.137363  3.078950  1.037143

html标记

 .container {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
}

.div1, .div2 {
  flex: 0 0 50%;
}
.div3{ 
  flex: 1;
}

我想要的是前两行排成一行，第三行推到下一行，覆盖100％;

Answer 1

你可以这样做。

.container {
      display: flex;
      flex-wrap: wrap;
}

.container div {
 height: 20px;
 
}

.div1, .div2 {
  flex: 0 0 50%;
}
div.div3{ 
  flex: 0 0 100%;
  
}

div.div1 {
 background-color:green;
}

div.div2 {
 background-color: yellow;
}

div.div3 {
 background-color: red;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

Answer 2

...

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.div1, .div2 {
width: 50%;
}
.div3{ 
width: 100%;
}

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>