是否可以使用flexbox混合行和列？ [英] Is it possible to mix rows and columns with flexbox?

问题描述

换句话说，是否可以实现这一点？

注意：这是我可以得到的最好的：

  
 
< div class =container> 
< div> Div 1< / div> 
< div> Div 2< / div> 
< div> Div 3< / div> 
< div> Div 4< / div> 
< / div> 
 
 // CSS 
 
 html，
 body，
 .container {
 height：100％; 
} 
 
 .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％; 
} 
  

  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 {}  

 < div class = container> <！ -  flex container  - > < div> Div 1< / div> <！ -  flex item＃1  - > < div> <！ -  flex item＃2和嵌套的flex容器 - > < 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  - >  

a href =http://jsfiddle.net/kzbbb/252/ =nofollow noreferrer> jsFiddle

In other words, is it possible to achieve this?

Note: This is the best I could get:

// HTML   

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

// CSS

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

.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%;
}

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

解决方案

You can achieve the layout with a few nested flexboxes. Here's the result of the code below:

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 { }

<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 -->

jsFiddle

这篇关于是否可以使用flexbox混合行和列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！