# Flex

div containers don’t share horizontal space with other containers by default, so all the layouts you’ve created so far were basically boxes stacked on top of each other. Real interfaces tend to get a bit more complex though:

There are many tools and techniques to create complex layouts with CSS. Flexbox is probably the most universal one, because it allows you to control direction, alignment and behavior of the child containers. What’s even more important for prototyping, the layouts created with flexbox can be altered with minimal effort, so you will not have to spend too much time restructuring your prototype to try a different layout.

You can turn any container into a flex parent container by changing the display property to flex:

<div style="display: flex;">
  <div style="background-color: #E2E8F0; padding: 12px;">
    One
  </div>
  <div style="background-color: #CBD5E0; padding: 12px;">
    Two
  </div>
  <div style="background-color: #718096; padding: 12px;">
    Three
  </div>
</div>

# The defaults

Flexbox comes with a number of properties that allow you to control the position and the behavior of its child containers. Those properties are explored in the articles that follow.

Some styles come with flexbox by default. The first thing you should notice in the example above is that the child containers take as much horizontal space as their content requires, not the full width of the parent container. Also, the children are stacked horizontally inside the flex container, not vertically.

If you specify height in one of the child containers, you will notice that other children of the flex container get the same height:

<div style="display: flex;">
  <div style="background-color: #E2E8F0;
              padding: 12px;
              height: 200px;">
    One
  </div>
  <div style="background-color: #CBD5E0;
              padding: 12px;">
    Two
  </div>
  <div style="background-color: #718096;
              padding: 12px;">
    Three
  </div>
</div>

This effect is the result of the default alignment property that is explored in the Alignment article.

# Practice

Put the time stamp next to the user name

1. Fork your result of the task in the Color article. You can also fork the prototype from the article.
2. In each of the three items, change the parent container of the user name and the timestamp containers into a flex parent container. This should position timestamp next to the user name.