플렉스 아이템 내부에만 블록 요소가 있습니까?

Question

플렉스 아이템 컨테이너 안에있는 블록 요소 (인라인, 인라인 블록, 아무 것도 작동하지 않는 요소) 만있을 수 있습니다. 그게 이상한데 내가 완전히 잘못하고 있지 않으면 유용하지 않니? 당신은 인 flexbox가 작동하려면 미리보기 창 높이를 증가해야 할 수도 있습니다 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; 
} 

: 여기

펜입니다.

명확성을 위해 편집 : 플렉스 항목 자체에 대해 말하는 것이 아니라 플렉스 항목 내부에있는 요소입니다. 위의 코드 In에서는 h2과 p이 경계를 이루고 있는데, 그들은 float 선언을 가지고 있지만 플로팅하지는 않습니다.

Answer 1

section 및 div 모두에 display: flex을 설정했습니다.

section이 컨테이너 역할을하는 경우 section에 display: flex을 입력하고 div을 플렉스 항목으로 남겨 둡니다. 그러면 p 및 h1이 플로트됩니다.

바이올린 : http://jsfiddle.net/abhitalks/zb12n2dk/

플렉스 DISPALY 내부 인라인 요소를 displaing에 대한

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

Answer 2

플렉스 레이아웃은 블록과 같은 레이아웃에서만 의미가 있으므로 플렉스 항목은 항상 블록으로 렌더링됩니다. 플렉스 아이템과 블럭 레벨 박스의 차이점은 3과 4 스펙 중 하나입니다. 플렉스 아이템이 플롯 할 수 없다는 또 다른 이유는 플렉스 레이아웃을 방해 할 수 있기 때문입니다. 플렉스 레이아웃으로 들어가십시오).

당신 항목 플렉스 (그리고 display: none에 모두 숨길)에 display의 서로 다른 값을 적용 할 수 있지만 이것은 단지 아이 플렉스 항목의이 아닌 항목에 대한 다양한 형식 컨텍스트를 설정의 영향을 미칠 것 그들 자신.

여기에는 시연중인대로 display: flex이 포함됩니다. 그렇다면 플렉스 항목이 자신의 자식을위한 플렉스 컨테이너가되어 그 자식이 중첩 된 플렉스 형식 컨텍스트에서 플렉스 항목을 만든다는 것입니다. 이 때문에 아이들이 떠 다니는 것은 효과가 없습니다.

플렉스 레이아웃을 설정하려면 플렉스 컨테이너에 자식이 아닌 display: flex 만 설정하면됩니다. display: none이 아닌 플렉스 컨테이너의 모든 하위 항목은 자동으로 플렉스 항목으로 만들어집니다.

Answer 3

, 거기는 그것뿐만 아니라 부동 소수점을 지원하지 않는 것 같습니다 그러나 display: inline-table를 사용하는 꽃밥 솔루션입니다하지만 당신은 포장하여이를 workarwond 수 있습니다 기타 등등으로

다음을 확인하십시오. 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; 
}