Block elements only inside flex item?

Question

Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong?

Here is the pen: 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;
}

You might have to increase the preview pane height for the flexbox to work.

Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see h2 and p bordered, they have the float declaration, but don't float.

Panne

Answer 1

You have set display: flex on both section as well as div.

If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.

Fiddle: 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;
    ...
}

Formic

Answer 2

Flex items are always rendered as blocks because flex layout only makes sense in a block-like layout. There are a few differences between flex items and block-level boxes which are covered in sections 3 and 4 of the spec, one being that flex items cannot float either, again because this would disrupt the flex layout (and conversely, neither can outside floats intrude into a flex layout).

You can apply different values of display to flex items (and hide them altogether with display: none), but this will only have the effect of establishing various formatting contexts for the children of the flex items, not the items themselves.

This includes display: flex, as you're demonstrating; what happens then is that the flex items become flex containers for their own children, which makes those children flex items in your nested flex formatting contexts. Because of this, floating those children won't work.

Note that in order to establish a flex layout, you only need to set display: flex on the flex container, not its children. All the children of a flex container that are not display: none will automatically be made flex items.

Assamese

I'm not talking about the flex items themselves, but the elements INSIDE the flex item. Edited the question. – Panne

@Nimbuz: I see what you're referring to now. The use of nested flex containers is causing some confusion, but it's still the same. You have a flex container, .fill-height-or-more, and in it you have some divs which are themselves both flex items and flex containers because they have their own display: flex definition. You are then trying to float the elements within those divs, which doesn't work because those elements are considered flex items within the inner flex formatting contexts. – Assamese

Thats almost a tounge twister there with so many flexes ;) but I got it from the example posted in another answer. Thanks – Panne

@BoltClock, you wrote: Flex items are always rendered as blocks... do you mean block-level elements? If so, can you point me to the relevant section in the spec? I've been unable to find anything explicit. Your two reference links cover the differences between block boxes and flex items. It also seems a bit confusing to call flex items block since they appear inline by default. If you don't mind, I am looking for something documenting your first sentence to (1) improve my understanding, and (2) provide an answer here: https://mcmap.net/q/743899/-flexbox-seems-to-be-ignoring-css-specificity. Thanks. – Nathanaelnathanial

@Michael_B: From section 3, "This is the same as establishing a block formatting context, except that flex layout is used instead of block layout" - which means there are subtle differences between flex items (which are flex-level because they participate in a flex FC) and block-level boxes, but they are similar in many aspects. – Assamese

Answer 3

for displaing inline elements inside flex dispaly, there is anther solution to use display: inline-table however it does not seem it support float as well but you can workarwond this by wrapping it with anther div or something

check the following 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;
}

Ruvolo

Answer 4

For people trying to display inline element inside a flex container and finding this page, you just need to wrap your content one level higher in a flex element.

Example:

Not

<label style="display:flex"> 
    A block label from a form <br>
    <i>This idiomatic element is a block box and not its inline default</span>
</label>

but

<div style="display:flex">
    <label> 
          A block label from a form <br>
          <i>This idiomatic is an inline box and does not become a block</i>
    </label>
</div>

Dvina