flex justify-content

justify-content: flex-start

by Henery Yang

HTML

flex-start
<div class="flex-container">
  <div class="flex-item">
    item 1
  </div>
  <div class="flex-item">
    item 2
  </div>
  <div class="flex-item">
    item 3
  </div>
</div>
flex-end
<div class="flex-container flex-end">
  <div class="flex-item">
    item 1
  </div>
  <div class="flex-item">
    item 2
  </div>
  <div class="flex-item">
    item 3
  </div>
</div>
center
<div class="flex-container center">
  <div class="flex-item">
    item 1
  </div>
  <div class="flex-item">
    item 2
  </div>
  <div class="flex-item">
    item 3
  </div>
</div>
space-between
<div class="flex-container space-between">
  <div class="flex-item">
    item 1
  </div>
  <div class="flex-item">
    item 2
  </div>
  <div class="flex-item">
    item 3
  </div>
</div>
space-around
<div class="flex-container space-around">
  <div class="flex-item">
    item 1
  </div>
  <div class="flex-item">
    item 2
  </div>
  <div class="flex-item">
    item 3
  </div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 300px;
    background-color: #ffd54f;
}

.flex-end {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.flex-item {
    background-color: #ffffff;
    width: 60px;
    height: 60px;
    margin: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}