是否可以使用flexbox混合行和列？

Question

换句话说，有可能实现这个目标吗？

注意：这是我能得到的最好的：

html, body, .container {
  height: 100%;
}

.container {
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

.container > div:nth-of-type(1) {
  flex: 1 1 100%;
}

.container>div:nth-of-type(4) {
  flex: 1 1 100%;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

http://jsfiddle.net/kzbbb/249/

Answer 1

您可以使用几个嵌套的flexbox实现布局。这是以下代码的结果：

＆＃13;

＆＃13;

html, body, .container {
    height: 100%;
    background-color: white;
}

.container {
    display: flex;
    flex-direction: column;       
    /* flex-wrap: wrap; */
}

.container div {                   
    margin: 10px;
    flex: 1;
    background-color: orange;
}

.container > div:first-child { }

.container > div:nth-child(2) {
    display: flex;
    background-color: white;
}

.container > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-right: 20px;
}

.container > div:nth-child(2) div {
    flex: 1;
    margin: 0;
}

.container > div:nth-child(2) > div:first-child > div:first-child {
    margin-bottom: 20px;
}

.container > div:last-child { }

＆＃13;

<div class="container">                <!-- flex container -->

    <div>Div 1</div>                   <!-- flex item #1 -->
    
    <div>                              <!-- flex item #2 and nested flex container -->
    
        <div>                          <!-- flex item and nested flex container -->
        
            <div>Div 2.1.1</div>       <!-- flex item -->
            
            <div>Div 2.1.2</div>       <!-- flex item -->

        </div>                         <!-- end flex item / container 2.1 -->
        
        <div>Div 2.2</div>             <!-- flex item -->
        
    </div>                             <!-- end flex item / container #2 -->
    
  <div>Div 3</div>                     <!-- flex item #3 -->
  
</div>                                 <!-- end .container -->

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

为了达到您想要的效果，只需对代码进行两处更改

<强>首先： 那些你想要一个在另一个之下的div，使它们成为div的孩子

<div class="container">
  <div>Div 1</div>
  <div>
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
  <div>Div 4</div>
  <div>Div 5</div>
</div>

第二：为了为所有div创建一个边框，请将您的CSS写为

.container  div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

而不是

.container > div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

将样式直接应用于divs类

中的所有divs而不是.container

看看这个：

.container {
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.container  div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

.container > div:nth-of-type(1) {
  flex: 1 1 100%;
}

.container > div:nth-of-type(4) {
  flex: 1 1 100%;
}

<div class="container">
  <div>Div 1</div>
  <div>
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
  <div>Div 4</div>
  <div>Div 5</div>
</div>