Flexbox Tutorial from Academind

flexbox-tutorial-from-academind.markdown

Flexbox Tutorial from Academind

A Pen by Rodrigo Lira on CodePen.

License.

index.html

<div class="parent">
  <div class="div1">div1</div>
  <div class="div2">w=150px</div>
  <div class="div3">h=150px</div>
  <div class="div4">w/h=150px</div>
  <div class="div5">w=200px</div>
  <div class="div6">w=200px</div>
</div>

style.css

html {
  background-color: #fa923f;
  padding: 10px;
}

body {
  background-color: yellow;
  padding: 10px;
  margin: 0;
}

/* Flexbox */
.parent {
  background-color: #f073e1;
  margin: 10px;
  padding: 30px;
  height: 500px;
  display: flex;
  flex-flow: row nowrap; /* flex-direction flex-wrap */
  align-items: center; /* defaults to stretch, refers to the cross-axis */
  justify-content: center; /* refers to main axis */
  /*align-content: center;*/ /* in relation to the cross-axis, when there's multiple lines */
}

.div1 {
  background-color: #f800db;
  margin: 5px;
}

.div2 {
  background-color: #f800db;
  margin: 5px;
  width: 150px;
  font-size: 30px;
  /*align-self: flex-start;*/
}

.div3 {
  background-color: #f800db;
  margin: 5px;
  height: 150px;
}

.div4 {
  background-color: #f800db;
  margin: 5px;
  width: 150px;
  height: 150px;
}

.div5 {
  background-color: #f800db;
  margin: 5px;
  width: 200px;
  flex: 0 1 auto; /* flex-grow flex-shrink flex-basis*/
}

.div6 {
  background-color: #f800db;
  margin: 5px;
  width: 200px;
  flex: 0 1 auto;
}