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>