Does the CSS Flexbox Module Work on Direct Child Elements Only

Does the CSS flexbox module work on direct child elements only?

To answer your question title: yes, this is actually stated quite clearly in the spec:

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item

In case the wording in the spec confuses you, that's because your wording is a bit off:

They are childs but not direct childs.

A child is direct by definition... the inner divs are called descendants, but not children in that they're not directly nested within the flex container.

Now, anything with display: flex or display: inline-flex is designated a flex container. While each flex item participates in the flex container's formatting context, the flex item's descendants are formatted independently and regardless of the flex container, being the same as if the container was never flexed in the first place.

As such, you can't reorder descendants of flex items, except if the flex item itself is also made a flex container for its descendants, but even then you cannot reorder them beyond this inner container and around the container's siblings with respect to the outer container.

Easiest way to select all elements of a Flex Container?

To select the direct children (level 1 children of the flex container):

.flexboxcontainer {  display: flex;}
.flexboxcontainer>* {  /*Select only 1 level children */  padding: 20px;  border: 2px solid black;}

<div class="flexboxcontainer">  <h1>Headline</h1>  <p>Some Text</p>  <div>Some more text    <h3>Random stuff</h3>  </div>  <p class="smalltext">Some small text    <span>Additional text</span>  </p></div>

How do Flex boxes work?

Flexbox is a recent addition to CSS. Then, the specification is not stable enough, so some browsers use vendor prefixes before the standard property or value. For example, webkit-based browsers use display: -webkit-flex or -webkit-justify-content.

If you want to make every element a flex container (I don't recommend it), you can use

* {
  display: flex;
  /* Repeat the same but with vendor prefixes */
}

And no, you are not using it correctly. Only children become flex items. So the flex container should be the ul:

.nav-flex-container > ul {  display: flex;  justify-content: flex-end;  list-style: none;}

<nav class="nav-flex-container">  <ul>    <li class="nav-flex-item"><a href="web-development.html">Web Development</a></li>    <li class="nav-flex-item"><a href="climbing.html">Climbing</a></li>    <li class="nav-flex-item"><a href="about-me.html">About Me</a></li>    <li class="nav-flex-item"><a href="blog.html">Blog</a></li>  </ul></nav>

Select only direct children from element with Sass

Try this:

    ...
    & > div {width: 33%;}

    div {
      float: left;
      height: 4.1rem;
      line-height: 4.1rem;
      color: #fff;
      ...

Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).

Please edit your question and better explain what exactly you want to achieve.

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Flex box direction column

Since the footer element is a direct child of the flexbox container, the easiest option would be to set the element's margin-top to auto. This will effectively place the footer element at the bottom of the container.

Updated Example

.footer {
  height: 20px;
  margin-top: auto;
}

If you're curious why this works, here is a quote from the relevant specification regarding auto margins on flexbox items:

Flexible Box Layout Module - 8.1. Aligning with auto margins
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

As you can see, the remaining free space is distributed in the direction of the auto margin.

Does the CSS Flexbox Module Work on Direct Child Elements Only