Flexbox的基礎不工作，如果父母有列方向

我有一個柔性容器，有兩個孩子（一個標題和一個彈性盒）。這個容器的方向是列。盒子兒童的方向是行，我想用flex-basis來約束它的寬度。這個是codepen。Flexbox的基礎不工作，如果父母有列方向

.container { 
    display: flex; 
    flex-direction: column; 
} 

.box { 
    display: flex; 
    flex-direction: row; 
    border: 1px solid #d3d3d3; 
    padding: 12px; 
    justify-content: space-between; 
    flex-basis: 192px; 
}

的問題是，柔性基礎正在改變容器的高度，沒有寬度。如何解決這個問題？

來源

2017-06-22 Alan Souza

您可以使用'width'。 flex方向上的一個列方向flex項目是其高度 – LGSon

我知道我可以使用寬度，但我想了解爲什麼此代碼不起作用。 –

的方向是排。檢查codepen。 –

flex-basis屬性在flex項目上設置，而不是flex容器，在您的情況下，flex容器container有列方向，因此flex-basis會影響高度。

注，flex-basis你在box規則不會對box設置屈曲方向作出反應，因此應對其Flex容器方向，在container

有了一個額外的包裝是雖然可以設置爲行方向，但使用flex-basis來定義寬度：https://codepen.io/alansouzati/pen/VWWNdX

來源

2017-06-22 19:05:10 LGSon

Flexbox的基礎不工作，如果父母有列方向

回答

相關問題