Flexbox的均勻間隔元件和包裝上窄屏幕

在寬屏，我想呈現兩個div均勻間隔的這樣的：Flexbox的均勻間隔元件和包裝上窄屏幕

|   [ONE]    [TWO]   |

當屏幕的寬度是小於的組合寬度div的，我希望他們來包裝和每個居中這樣的：

| [ONE] | 
| [TWO] |

我目前正在嘗試與Flexbox，就這樣做：

.evenly-space { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
} 

<div class="evenly-space"> 
    <div style="width:200px;border:1px solid black">ONE</div> 
    <div style="width:200px;border:1px solid black">TWO</div> 
</div>

但是這兩個元素停留在一條線上，不包裹。

有沒有一種方法可以用flexbox或其他方式實現這一點？

來源

2017-07-20 Jeff O' Neill

您試過'flex-wrap：wrap'嗎？ – Sankar

只是flex-wrap: wrap

.evenly-space { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    -webkit-justify-content: space-around; 
 
    justify-content: space-around; 
 
}

<div class="evenly-space"> 
 
    <div style="width:200px;border:1px solid black">ONE</div> 
 
    <div style="width:200px;border:1px solid black">TWO</div> 
 
</div>

來源

2017-07-20 14:43:16 Sankar

謝謝，快速回答！ –

你必須在flex-wrap屬性添加並設置爲wrap

.evenly-space { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
}

來源

2017-07-20 14:43:00 SKeurentjes

所有你需要的是添加

flex-wrap: wrap;

物業在您的.evenly-space類

來源

2017-07-20 14:46:11

Flexbox的均勻間隔元件和包裝上窄屏幕

回答

相關問題