如何使用Flexbox？

Question

我有這樣一個佈局：

<div class="outer"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"> 
    <div class="deeper"> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
    </div> 
    </div> 
</div> 
<div class="outer"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"> 
    <div class="deeper"> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
    </div> 
    </div> 
</div> 

我必須對準div就像：所有div s的「外」類有來自新的生產線和所有的div s的「內部」類開始必須位於「外部」div和div之間的同一行內，「內部」div內部有較深的類別，應從新行開始並且「newLineContent」div必須位於「更深」的同一行內div s

如何使用flexbox實現此目的？或者還有其他方法可以實現嗎？

Answer 1

.outer{ 
    display: flex; 
} 

就這麼簡單！如何配置父母和孩子的選擇取決於你想達到的效果。

Answer 2

試試這個：

.outer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.inner:last-child .deeper { 
 
    display: flex; 
 
}

<div class="outer"> 
 
    <div class="inner">1.1</div> 
 
    <div class="inner">1.2</div> 
 
    <div class="inner">1.3 
 
    <div class="deeper"> 
 
     <div class="newLineContent">1.3.1</div> 
 
     <div class="newLineContent">1.3.2</div> 
 
     <div class="newLineContent">1.3.3</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner">2.1</div> 
 
    <div class="inner">2.2</div> 
 
    <div class="inner">2.3 
 
    <div class="deeper"> 
 
     <div class="newLineContent">2.3.1</div> 
 
     <div class="newLineContent">2.3.2</div> 
 
     <div class="newLineContent">2.3.3</div> 
 
    </div> 
 
    </div> 
 
</div>

根據您當前的HTML結構，這是你得到的結果。 .inner的Flex項目：last-child .deeper無法伸展瀏覽器的全部寬度，因爲.deeper表示父級的三分之一，即外部div。

Answer 3

沒有Flexbox的人可以做類似的事情，但是在這種情況下，Flexbox似乎是最好的。

.outer, 
 
.deeper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.inner { 
 
    flex-grow: 1; 
 
    padding: 20px 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
} 
 
.inner:last-child { 
 
    flex-basis: 100%; 
 
} 
 
.newLineContent { 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div>

---

基於評論更新

如果deeper可以是孩子的任何inner的，並達到同樣的效果，人們會需要或者父母選擇器不存在，或者爲inner增加一個包含deeper的類。

另一種可能的解決方法是使用視口單元vw。

.outer, 
 
.deeper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: calc(100vw - 40px); /* 40px to make up for body's margins/scrollbar */ 
 
    margin: 0 auto; 
 
} 
 
.inner { 
 
    flex-grow: 1; 
 
    padding: 20px 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
} 
 
.deeper { 
 
    width: calc(100vw - 62px); /* 62px is to make up for "inner" padding/border, 22px, 
 
            and 40px for body's margins/scrollbar  */ 
 
} 
 
.newLineContent { 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
    <div class="inner"></div> 
 
</div>