如何使用Flexbox將行中的兩個框對齊？

Question

我想什麼做的是非常具體的，所以我畫一張圖片來說明吧：

我可以很容易地實現這一點：

，但它不在這個網站上看起來不錯，因爲E元素比C或D高得多。

我想要的是C和D在瀏覽器窗口很寬，但不是中等寬度時。

我試圖用CSS和Flexbox實現這一點，並且我試過將C和D分組在一起，但是這會在中等佈局中產生問題。

Answer 1

Flexbox的柔性值是1D佈局。當然，你可以添加一些嵌套，一些固定的高度，但它是一維的，並不是完美的解決方案。

這裏使用CSS Grid Layout要好得多，因爲它是2D佈局。

.grid { 
 
    display: grid; 
 
} 
 

 
/* just styles for demo */ 
 
.grid__item { 
 
    font-size: 3em; 
 
    padding: 20px; 
 
    background-color: orange; 
 
    color: white; 
 
    margin: 10px; 
 
    
 
    /* using flexbox for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
/* medium screen */ 
 
@media screen and (min-width: 700px) and (max-width: 999px) { 
 
    .a { 
 
    grid-column: 1/span 2; 
 
    } 
 
} 
 

 
/* wide screen */ 
 
@media screen and (min-width: 1000px) { 
 
    .grid { 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .d { 
 
    grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    grid-column: 2/span 2; 
 
    grid-row: 2/span 2; 
 
    } 
 
}

<div class="grid"> 
 
    <div class="grid__item a">A</div> 
 
    <div class="grid__item b">B</div> 
 
    <div class="grid__item c">C</div> 
 
    <div class="grid__item d">D</div> 
 
    <div class="grid__item e">E</div> 
 
</div>

如果您需要IE/EDGE的支持，你必須手動使用過時的語法和指定地點的每一行。 IE/Edge實現沒有網格單元自動佈局。因此，如果您沒有爲每個單元格指定grid-column/grid-row，它們將全部堆疊在第一個單元格中。因此，對於IE /邊緣-ms-grid-row和-ms-grid-column默認值是1演示：

.grid { 
 
    display: grid; 
 
} 
 

 
/* just styles for demo */ 
 
.grid__item { 
 
    font-size: 3em; 
 
    padding: 20px; 
 
    background-color: orange; 
 
    color: white; 
 
    margin: 10px; 
 
    
 
    /* using flexbox for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
/* medium screen */ 
 
@media screen and (min-width: 700px) and (max-width: 999px) { 
 
    .grid { 
 
    display: -ms-grid; 
 
    -ms-grid-columns: 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    -ms-grid-column: 1; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .b { 
 
    -ms-grid-row: 2; 
 
    } 
 
    
 
    .c { 
 
    -ms-grid-row: 2; 
 
    -ms-grid-column: 2; 
 
    } 
 
    
 
    .d { 
 
    -ms-grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    -ms-grid-row: 3; 
 
    -ms-grid-column: 2; 
 
    } 
 
} 
 

 
/* wide screen */ 
 
@media screen and (min-width: 1000px) { 
 
    .grid { 
 
    display: -ms-grid; 
 
    -ms-grid-columns: 1fr 1fr 1fr; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    -ms-grid-column: 1; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .b { 
 
    -ms-grid-column: 3; 
 
    } 
 
    
 
    .c { 
 
    -ms-grid-row: 2; 
 
    } 
 
    
 
    .d { 
 
    -ms-grid-row: 3; 
 
    grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 2; 
 
    grid-row: 2/span 2; 
 
    -ms-grid-column: 2; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 2/span 2; 
 
    } 
 
}

<div class="grid"> 
 
    <div class="grid__item a">A</div> 
 
    <div class="grid__item b">B</div> 
 
    <div class="grid__item c">C</div> 
 
    <div class="grid__item d">D</div> 
 
    <div class="grid__item e">E</div> 
 
</div>

如果你想測試調整這裏是jsFiddle。

Answer 2

demo

變化，你需要的

.box { 
 
    background-color: green; 
 
    margin: 5px; 
 
    /* padding: 30px; */ 
 
} 
 

 
.one { 
 
    display: flex; 
 

 
} 
 

 
.a { 
 
    flex: 3; 
 
} 
 

 
.b { 
 
    flex: 2; 
 
} 
 

 
.two { 
 
    display: flex; 
 
    
 
} 
 

 
.three { 
 
    flex: 2; 
 
} 
 

 
.four { 
 
    flex: 3; 
 
}

<div class="main"> 
 
    <div class="one"> 
 
     <div class="a box">a</div> 
 
     <div class="b box">b</div> 
 
    </div> 
 
    <div class="two"> 
 
     <div class="three"> 
 
      <div class="c box">c</div> 
 
      <div class="d box">d</div> 
 
     </div> 
 
     <div class="four box"> 
 
      <div class="e">e</div> 
 
     </div> 
 
    </div> 
 

 
</div>