CODEWITHSUNDEEP
cssflexbox
eozzy
eozzy

Reputation: 68670

Block elements only inside flex item?

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.

Upvotes: 17

Views: 49806

Answers (4)

gerardnico
gerardnico

Reputation: 1073

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>

Upvotes: 0

Reda
Reda

Reputation: 711

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;
}

Upvotes: 2

Abhitalks
Abhitalks

Reputation: 28387

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

Upvotes: 19

BoltClock
BoltClock

Reputation: 723678

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.

Upvotes: 15

Related Questions