将代码转换为flexbox ..对齐两个div

Question

我有一个产生这个的代码，但我想使用Flexbox，因为我当前的代码非常混乱。我该怎么做？

＆＃13;

＆＃13;

.container {
  background: red;
  padding: 10px;
}

.container2 {
  background: green;
  padding: 10px;
}

.left {
  float: left;
  padding: 10px;
  padding-top: 0px;
  width: 48%;
  background: #fff;
}

.right {
  float: right;
  padding: 10px;
  padding-top: 0px;
  width: 40%;
  background: #fff;
}

.red {
  width: 100%;
}

＆＃13;

<div class="container">
  <div class="container2">
    <div class="left">
      <p>Hello</p>
    </div>
    <div class="right">
      <p>Hello</p>
    </div>
    <div style="clear: both;">
    </div>
    <button class="red">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JsFiddle：https://jsfiddle.net/19e8nmr3/

Answer 1

您可以将p个元素包装在一个父元素中，然后使用flex: 1。

＆＃13;

＆＃13;

.container {
  background: red;
  padding: 10px;
}
.container2 {
  display: flex;
  flex-direction: column;
  background: green;
}
.wrap {
  display: flex;
}
.wrap p,
button {
  padding: 10px;
  background: #fff;
  flex: 1;
  margin: 10px;
}

＆＃13;

<div class="container">
  <div class="container2">
    <div class="wrap">
      <p>Hello</p>
      <p>Hello</p>
    </div>
    <button class="red">Button</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;