我試圖創建一個使用flex-wrap: wrap的flexbox容器，但是一旦它被包裝的寬度只有它所需的寬度，那麼它可以居中。如何創建以居中內容爲中心的Flexbox容器，並在包裝時維護中心？
現在，一旦我將窗口大小調整爲足夠小以致元素包裹，元素將繼續使用其最大寬度，從而導致它的子元素一直推到左邊。
這裏是我的Plunker
鏈接這裏是我的調整窗口大小的GIF。正如你所看到的，當綠色和紅色的div有足夠的空間放在同一行上時，它們看起來居中，但當它們換行時不會。優選地，紅色div的左側應該有與綠色div的右側相同的空白。
最好是，當行包應該是這樣的： 
任何幫助將不勝感激！
您不希望flexbox容器中的塊元素（紅色和綠色框）的寬度。這與「響應式」設計模式相似，而不是flex。
無論什麼 Flex寬度（或高度）保持不變。因此，請務必確定容器的大小，並對其子女進行展示。
.flex-container {
width: 25%;
height: auto;
margin:auto;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
.green-block{
/*min-width: 200px;*/
background-color: green;
padding: 10px;
display:flex;
}
.red-block{
/*min-width: 300px;*/
background-color: red;
padding: 10px;
display:flex;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="flex-container">
<div class="flex-row-wrappable">
<div class="red-block">I'm a red block</div>
<div class="green-block">Imma green block, and I have more width than my red counterpart.</div>
</div>
</div>
</body>
</html>
從本質上講，我的理解是...... **你不能** - 這不是線路盒模型的工作方式。 https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width是我想的點。 –
我能得到的最接近的是，使用媒體查詢：https：//jsfiddle.net/j1oabjp4/ – LGSon