Flex

by rexonms

HTML

<h1>Flex Box</h1>


<h4>
 Flex Direction: column
</h4>
<div class="flex-column flex-box">
  <div>
   flexDirection: 'column' // This is the deffacult
  </div>
  <div>
   justifyContent: 'flex-end' // Moves stuff height wise y
  </div>
  <div>
   alignItems: 'flex-end' // Moves stuff width wise x
  </div>
</div>


<h4>
 Flex Direction: Row
</h4>
<div class="flex-row flex-box">
  <div>
   flexDirection: 'column' // This is the deffacult
  </div>
  <div>
   justifyContent: 'flex-end' // Moves stuff height wise y
  </div>
  <div>
   alignItems: 'flex-end' // Moves stuff width wise x
  </div>
</div>

CSS

body {
  font: helvetica;
}
.flex-box {
  padding: 20px;
  background: #ccc;
  border: 1px dotted #aaa;
   min-height: 200px;
  min-width: 400px;
}

.flex-box div {
  margin: 10px;
  padding: 10px;
  background: #ddd;
}
.flex-column { 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-row { 
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}