如何在一行上制作两个柔性盒，另一个在列上另外制作两个柔性盒？

Question

body {
      position: relative; 
  }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
.container-fluid {
    width: inherit;
    height: inherit;
    margin: 0;
    padding: 0;
}

  #section5 {padding-top:50px;color: #fff; background-color: #009688;}

#form {
  position: relative;
  width: 500px;
  margin: 50px auto 100px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="section5" class="container-fluid text-center">
   <h2>Bla Bla</h2>
    <div class= "col-xs-6">
        <form id="form" class="topBefore" action="/my-handling-form-page" method="post"> 
          <input id="name" type="text" placeholder="Your name" name="user_name">
        </form>
    </div>

    <div class="col-xs-6">
            <div id="up">
                <p>bla bla</p>  
            </div>
            <div id="down">
                <p>bla bla</p>
                <p>bla bla </p> 
            </div>
    </div>

</div>

如何在一行上制作两个柔性盒，另一个在列上另外有两个柔性盒，第一个对齐到flex-start而另一个对齐到flex-end？更具体地说，在html上实现这一目标的最佳方法是什么：请参阅img

我已经得到了这段代码，但正如你所看到的那样，分别没有与表格的顶部和底部对齐。

Answer 1

试试这个：

＆＃13;

＆＃13;

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
#footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}
.colOne{
  background-color:green;
}
.colTwo{
  background-color:red;
}

＆＃13;

<div id="footer">
test content
</div>
<div id="container">
  <div class="col colOne">
    test column 1
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
  <div class="col colTwo">
    test column 2
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

header{
width:100%;
height:80px;
position:relative;}
header nav{
background:#ccc;
width:75%;
height:100%;
margin:0 auto;}

section{
width:100%;
height:400px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

section .left, section .right{
background:yellow;
position:relative;
width:50%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;}

.content{
border:1px solid black;}

.left .content{
width:80%;
height:40%;
}

.right .content{
width:80%;
height:20%;}

＆＃13;

<header>
<nav></nav>
</header>

<section>
  <div class="left">
    <div class="content">a</div>
  </div>
  <div class="right">
    <div class="content">b</div>
    <div class="content">c</div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

也许它可以帮助你理解。