flex模型：第一行元素寬度第二行

Question

我完全不理解flex模型。在這個例子中，第一行（第一個和第二個）的元素應該顯示在一行中：第一個元素爲200px，第二個元素應該有剩餘空間。

\t .wrapper { 
 
\t display: flex; 
 
      width: 100%; 
 
\t } 
 
\t .first { 
 
\t width: 200px; 
 
\t background: red; 
 
\t } 
 
\t .second { 
 
\t flex: 1; 
 
\t background: blue; 
 
\t } 
 
\t

<div class="wrapper"> 
 
    <div class="first">first left</div> 
 
    <div class="second">first right</div> 
 
</div>

現在我要添加第三元素，其中應正下方的第二個具有相同的寬度，則所述第二元件被放置。所以它不應該有完整頁面的100％，但只能顯示在第二個元素下面。

<div class="wrapper"> 
    <div class="first">first left</div> 
    <div class="second">first right</div> 
    <div class="third">second</div> 
</div> 

Answer 1

你可以這樣做，使用calc功能。

.wrapper { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100%; 
 
    flex-flow: row wrap; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex-end; 
 
} 
 

 
.first { 
 
    width: 200px; 
 
    background: red; 
 
} 
 

 
.second { 
 
    width: calc(100% - 200px); 
 
    background: blue; 
 
} 
 

 
.third { 
 
    background: yellow; 
 
    width: calc(100% - 200px); 
 
}

<div class="wrapper"> 
 
    <div class="first">first left</div> 
 
    <div class="second">first right</div> 
 
    <div class="third">second right</div> 
 
</div>