How to Make All Elements on The Page a Display: Flex (Flexbox)

Is it possible to make all elements on the page a display: flex (flexbox)?

(I took my comments and turned them into an answer)

The universal selector would do the trick:

body * { display: flex; }

(Note that I've scoped it to only include elements within the body)

The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues, but it's by far the simplest way of doing what you asked (given that the display property isn't inherited). The other option (a selector consisting of a massive list of all HTML) elements would take quite a long time to download and parse, too! As for best practise, I don't think either of them is a particularly awesome idea, but I don't know the details of your implementation.

The display property isn't inherited because it would wreak havoc! For example, the <a> element is an inline element. If it inherited display: block; from it's parent elements, all links would be full width and cause a line break (like a p, h1 or div). The inheritance bit of the (rather complicated) CSS2 spec is here: http://w3.org/TR/CSS2/cascade.html#inheritance

How to display 3 items per row in flexbox?

Flex container:

You probably want to use display: flex not inline-flex.
Add flex-wrap: wrap to allow wrapping onto multiple lines.
Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

flex-basis: 33.333333%
You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

How to make Flexbox items the same size

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0px;

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;

Using display:flex on almost everything

Flexbox comes to improve existing layouts. Float is still the only option to do what it does, there's no flexbox alternative for it. You can see flexbox as "improved tables". It shares many concepts with them (but it isn't a complete alternative)

display:flex can't even replace block, because a display:flex is actually a block itself; flex affects its children not the way it is laid out itself

same as a display:inline-block element. it is laid out like an inline element, but its contents are laid out as they were in a display:block element

you can have display:flex on almost everything, except on text blocks, like paragraphs and headings, or any other text string. they should be contained in a block element, otherwise browsers will do it for you: http://jsfiddle.net/56fHY/

what you can also see from this example, is that even if <b> is display:inline, since its container is display:flex, it is forced to be display:block

you also still need float: as I already said

you also may need inline-flex: a typical use case are elements such as widgets that should work both when placed in a display:block paragraph and when used in a display:flex container

you still need also display:table or <table>s because flexbox can't cover all their features. for example in order to make grids with flexbox you have to specify dimensions (via width/height/flex-basis) while with tables dimensions are calculated implicitly (eg the width of the cells in a column are equal to the larger cell in the column); you can for example simulate colspan but not rowspan) http://jsfiddle.net/xDLvg/

and of course you still need display:inline elements, for bold and other text-level styling

hope this helps

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

How to horizontally stretch elements when using flex-box

Just add flex:1 to flex items:

.flex-container {  display: flex;  height: 200px;  align-items: stretch;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;  flex: 1;}

<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>  </div>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

How to create an element on top of the layout with 100% height, maybe flexbox?

I made a jsfiddle with the layout you want. The thing that was missing is a position: relative on the body, then you can use position: absolute; top: 0; bottom: 0; right: 0; to get the bar to take up all the height.

To get different size for the right bars, you can use different values for the flex of each bar. Lets say you want the first bar to take 1/3 of the total height then you can set flex: 1; on the first and flex: 2; on the second.

https://jsfiddle.net/2q16xk57/1/

Why are not all flexbox elements behaving like flexbox divs?

As far as I can tell, this is down to browser bugs to do with the fieldset element.

It's a known issue with fieldset elements in Chrome. Firefox has a similar (very old) issue in that legend and fieldset are replaced elements.

I guess it's safer to use a <div role="group"> instead of a real fieldset for now. In your CSS you could use div[role='group'] as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend for more information.