我正在將一個舊的基于內嵌塊的網格模型更新為我創建的一個新的Flexbox模型。一切都很好，除了一個小問題，它已經成為一個交易破壞者:

我有一堆CSS控制的滑塊；所以有一個寬度為100%的包裝器，里面是另一個div:它的寬度也是100%，但是它的空白被設置為nowrap。使用inline-block，這意味著內部div(也被設置為100%寬度)不會被它們的父div的約束所約束，也不會繞到下一行——它們只是繼續流出盒子。這正是我想要的。然而，我不能讓它在flexbox上工作。作為參考，這里有一張圖片:

作為參考，這里有一個使用內聯塊的例子:http://jsfiddle.net/5zzvqx4b/

...不使用Flexbox:http://jsfiddle.net/5zzvqx4b/1/

我已經嘗試了flex、flex-basis、flex-wrap、flex-grow等各種變體。但是我無論如何也不能讓它工作。

注意，我可以通過設置。箱式容器寬度為200%。這對于這個例子來說是可行的，但是在某些情況下，我不知道會有多少個子框，如果可能的話，我寧愿不要在每個元素上使用內聯樣式。

要防止伸縮項目收縮，請將伸縮收縮因子設置為0:

伸縮收縮系數決定伸縮項目的大小 相對于flex中的其余flex項目收縮 分配負可用空間時的容器。省略時，它是 設置為1。

.boxcontainer .box {
  flex-shrink: 0;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}

<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>

您可以使用速記flex屬性，并將其設置為

flex: 0 0 100%;

這是一系列靈活增長、靈活收縮和靈活基礎的組合。Flex shrink如上所述，flex grow是相反的，flex basis是容器的大小。

在我的例子中，僅僅使用flex-shrink: 0不起作用。但是添加flex-grow: 1成功了。

.item {
    flex-shrink: 0;
    flex-grow: 1;
}

設置伸縮方向:列

您正在嘗試將項目堆疊在一列中，而不是一行中。

{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

額外的東西-flex包裝器的大小(需要背景寬度/高度和塊的上下文大小)，為此我們可以使用display:inline-flex；