Proper Use of Flex Properties When Nesting Flex Containers

Proper use of flex properties when nesting flex containers

The scope of a flex formatting context is limited to a parent/child relationship.

This means that a flex container is always the parent and a flex item is always the child. Flex properties work only within this relationship.

Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties.

You will always need to apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child.

There are certain flex properties that apply only to flex containers (e.g., justify-content, flex-wrap and flex-direction), and there are certain flex properties that apply only to flex items (e.g., align-self, flex-grow and flex).

However, flex items can also be flex containers. In such cases the element can accept all flex properties. Being that each property performs a different function, there is no internal conflict and nothing needs to be overridden.

Is it bad practice to make a flex item a flex container?

There is nothing wrong or invalid with nesting flex containers. The flexbox specification neither prohibits nor even admonishes against the practice.

In fact, it's what you must do when you need to apply flex properties to the descendants of a top-level container, since flex layout works only between parent and child elements.

More details here: Proper use of flex properties when nesting flex containers

Does flex: ... imply display: flex?

Using flex: properties on child elements (flex items) will have no effect unless the parent (flex container) is set to display: flex (or inline-flex).

Flex items - that is, the children of a flex container - do not need display: flex unless they are flex containers themselves with additional items in them that will be following flex styles.

Adding container div removes flexbox

flex is being applied to the direct children of header. When you add the container div, it'll apply to that but not to any of its children. To achieve what you're looking for, move the flex rules to container instead of header.

html,
body {
  margin: 0;
  padding: 0;
  background-color: #24252A;
  color: white;
  height: 100%;
}

header {
  background: gray;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

.logo img {
  height: 50px;
}

<body>

  <header>
    <div class="container">

      <div class="brand">
        <h1>Site</h1>

      </div>

      <div class="logo">
        <img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
      </div>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>

  </header>


</body>

Does flex: ... imply display: flex?

Using flex: properties on child elements (flex items) will have no effect unless the parent (flex container) is set to display: flex (or inline-flex).

Flex items - that is, the children of a flex container - do not need display: flex unless they are flex containers themselves with additional items in them that will be following flex styles.

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>

Nested flexboxes and items alignment

The property that controls how the children are aligned along the main axis is justify-content

.align-end {
    justify-content: flex-end;
}

plunker

Proper Use of Flex Properties When Nesting Flex Containers