<h1>flex-basis directions</h1>

<p>
  In contrast with <code>width</code> and <code>height</code>, the <code>flex-basis</code> works on both directions:
</p>

<h2>1) flex-basis: 100px; flex-direction: row;</h2>

<div class="container container--row">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

<h2>2) flex-basis: 100px; flex-direction: column;</h2>

<div class="container container--column">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
.container {
  display: flex;
}

.box {
  padding: 1em;
  background: lightgrey;
  margin: 1em;
  flex-basis: 100px;
}

.container--row {
  flex-direction: row;
}

.container--column {
  flex-direction: column;
}


/* etc. */

img {
  max-width: 100%;
  height: auto;
}

/* ETC (Formatting only): */

body {
  margin: 1.5em;
  font-size: 130%;
  font-family: sans-serif;
  background: #F2F0EC;
  color: #2E2C08;
}

.container {
  display: flex;  
  border: 10px solid #2E2C08;
  background: white;  
}

.box {
  margin: 0.25rem;
  padding: 0.5em;
  text-align: center;
  background: #abab9d;
}

fieldset {
  border: #abab9d 1px solid;
  padding: 0;
  margin-bottom: 2em; 
}

label {
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
}

.active {
  background: #abab9d;
}

.box--one {
  background: #abab9d;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.