塊元素只在Flex項目內？

顯然，您只能在Flex項目容器中使用塊元素（內聯，內聯塊，浮動無效）？這只是奇怪，似乎並不有用，除非我完全錯了嗎？塊元素只在Flex項目內？

這裏是筆：http://codepen.io/iaezzy/pen/GggVxe

.fill-height-or-more { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.fill-height-or-more > div { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

您可能必須增加對Flexbox的工作預覽窗格的高度。

爲清楚起見進行了編輯：我不是在談論flex項目本身，而是在flex項目內部的元素。在上面的codepen中，您會看到h2和p有界，它們有float聲明，但不會浮動。

來源

2014-11-23 3zzy

您在section以及div上都設置了display: flex。

如果section充當容器，則將display: flex設置爲section，並將div保留爲彈性項目。然後ps和h1s將浮動。

小提琴：http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more { 
    display: flex; 
    flex-direction: column; 
    ... 
} 
.fill-height-or-more > div { 
    flex: 1; 
    ... 
} 
.some-area > div p { 
    width: 40%; 
    float: left; 
    ... 
}

來源

2014-11-23 15:08:50 Abhitalks

啊，明白了！謝謝！ – 3zzy 2014-11-23 15:20:45

Flex項目總是以塊的形式呈現，因爲flex佈局只有在塊狀佈局中才有意義。柔性項目和塊級框之間存在一些區別，這些區域在規範的3和4部分中涵蓋，其中一個是flex項不能浮動，因爲這會破壞柔性佈局（並且相反，既不能浮動外部浮動侵入到一個靈活的佈局）。

您可以應用不同值的display彎曲項目（與display: none完全隱藏），但這隻會有對兒童的撓性項目，而不是項目建立各種格式化背景的影響他們自己。

這包括display: flex，正如您演示的那樣;接下來會發生的事情是flex項目變成了他們自己的孩子的flex容器，這使得這些孩子在嵌套的flex格式上下文中彈性項目。因此，漂浮這些孩子將無法工作。

請注意，爲了建立一個柔性佈局，您只需要在柔性容器上設置display: flex，而不是子級。所有不是display: none的彈性容器的孩子都將自動變爲彈性項目。

來源

2014-11-23 14:36:45 BoltClock

我不是在談論flex項目本身，而是flex元素的內部元素。編輯了這個問題。 – 3zzy 2014-11-23 14:40:54

@Nimbuz：我明白你現在指的是什麼。嵌套柔性容器的使用引起了一些混淆，但它仍然是一樣的。你有一個flex容器，'.fill-height-or-more'，並且裏面有一些div，它們本身都是* flex項目和flex容器，因爲它們有自己的'display：flex'定義。然後，您嘗試將這些元素浮動到這些div中，但這並不起作用，因爲這些元素在內部flex格式化上下文中被視爲flex項目。 – BoltClock 2014-11-23 14:43:52

這幾乎是一個令人費解的扭曲那麼多的彎曲;）但我從另一個答案中發佈的例子中得到它。謝謝 – 3zzy 2014-11-23 15:22:19

爲displaing柔性dispaly內聯元素，有花葯解決方案中使用display: inline-table但它似乎不是很支持浮法很好，但你可以通過包裝workarwond這它與花葯div或東西

檢查以下jsfiddle https://jsfiddle.net/reda84/eesuxLgu/

.row{ 
    width:100%; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
} 
.row > .col { 
    display: flex; 
    box-sizing: border-box; 
    width:50%; 
    float:left; 
    flex-direction: column; 
    border:1px solid #333; 
    min-height:100px; 
    padding:15px 
} 
.tag{ 
    background: #1b8fe7; 
    color:#fff; 
    padding:5px 10px; 
    display: inline-table; 
    margin:0px 5px 5px 0; 
}

來源

2016-03-04 12:15:27 Reda

塊元素只在Flex項目內？

回答

相關問題