<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="http://via.placeholder.com/600x250"></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="http://via.placeholder.com/600x250"></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;
}

body {
  margin: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.