我有這個fiddle顯示我的代碼。 它工作正如我想要的:基本上它是一個帶有1行項目的容器,需要100%的寬度,以及兩個固定寬度的項目。 如果容器足夠大,他們應該保持排隊,否則他們應該包裝。Flex佈局溢出外部容器
我不明白爲什麼當我的視口變小時,兩個較小的塊開始在容器外側溢出,並且它們沒有像我期望的那樣收縮。 我試圖刪除固定的寬度和使用彈性基礎,但它打破了佈局。
這是對小提琴代碼:
<div class="container">
<div class="search-form flex-row">
<span class="block big">hi</span>
<div class="flex-block">
<span class="block">hi</span>
<span class="block">hi</span>
</div>
<span class="block">hi</span>
</div>
</div>
CSS:
.container{
height:100vh;
width:100%;
padding:50px;
}
.search-form {
/* margin-bottom: 0px; */
margin: auto;
height: 100%;
font-size: 18px;
background-color:blue;
}
.flex-row {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.flex-block{
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.block{
flex-shrink:1;
width:150px;
background-color:red;
margin:5px;
}
.block.big{
width:100%
}
我很困惑,爲什麼你提到「行」,但使用的是'柔性方向:column'。您在塊上固定寬度... flexbox不會覆蓋該寬度。 –
我談論行,因爲基本上第一個是一個元素行,第二個是兩個元素行。然後,它們每行包含一個元素,就像普通的列布局一樣。 – MQ87
就像我說的那樣,你有固定的寬度......除了重新思考你所追求的內容(對我來說這並不清楚)以及可能的方式,你可以做的不多。 –