<h2>Answer to Flexbox Question on Dev.to</h2>
<p>Source: <a href="https://dev.to/moopet/comment/co06" target="_blank">https://dev.to/moopet/comment/co06</a></p>
<h3>All flex items taking up equal space:</h3>
<p>All the items in the container are getting the same flex value which means that they all take up an equal amount of space and it gives a balanced layout.</p>
<pre>.container > .item {  
    flex: 1;  
}</pre>
<br><br>
<nav class="container">
  <div class="item">Home</div>
  <div class="item">Search</div>
  <div class="item">Logout</div>
</nav>
<h3>One item taking up more space:</h3>
<p>Here you are targetting the search item specifically with a class name INSTEAD of using the rule above.</p>
<pre>.search {  
    flex: 1;  
}</pre>
<br><br>
<nav class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="logout">Logout</div>
</nav>
<h3>Using different flex values for each item:</h3>
<p>Here you are setting the proportions for distributing the extra space in the container. So on large screen sizes you will see that ".medium" is taking up twice the space of ".small" and ".big" is 3x the size of ".small".</p>
<pre>
.big {  
  flex: 3;
}

.medium {
  flex: 2;
}

.small {
  flex: 1;
}
</pre>
<br><br>
<nav class="container">
  <div class="big">Home</div>
  <div class="medium">Search</div>
  <div class="small">Logout</div>
</nav>
<p>Note: Flex is about sharing the available width of the container between the items in the container. This means that on narrower screen sizes all of the 3 demos above will end up looking the same because there won't be enough extra space to share between the items. Try changing the width of this window to see the flex effect in action.</p>

* {
  box-sizing: border-box;
}

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

html,
body {
  background-color: #eae8dd;
  color: #3f3d3e;
  font-family: Helvetica, sans-serif;
  margin: 1em;
}

.container {
  border: 0.3em solid #d7c3a6;
  display: flex;
}

.container > div {
  padding: 0.5em;
  text-align: center;
  font-size: 2em;
  color: #eae8dd;
}

.container > .item {
  flex: 1;
}

.search {
  flex: 1;
}

.big {
  flex: 3;
}

.medium {
  flex: 2;
}

.small {
  flex: 1;
}

.container > div:nth-child(1) {
  background-color: #e65b54;
}

.container > div:nth-child(2) {
  background-color: #e68076;
}

.container > div:nth-child(3) {
  background-color: #8e8d89;
}

h3 {
  margin-top: 3em;
}

pre {
  background: #1a1b1f;
  color: #eee;
  padding: 1.5em 1em;
}

p {
  line-height: 1.5em;
}

a {
  color: #e65b54;
}