All about Flexbox Layout

by SriSri M

HTML

<h2>Flex Layout - Default row & nowrap</h2>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 4</div>
</div>
<h2>Flex Layout - Row/Coumn</h2>
<div class="flex-container column">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 4</div>
</div>
<h2>Flex Layout - wrap</h2>
<div class="flex-container wrap">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 4</div>
<div class="flex-item">flex item 5</div>
<div class="flex-item">flex item 6</div>
</div>
<h2>Flex Layout  justify-content</h2>
<div class="flex-container justify-content">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 240px;
    background-color: Silver;
}

.flex-item {
    background-color: DeepSkyBlue;
    width: auto;
    height: 100px;
    margin: 5px;
}
.column {
  /* flex-direction: row | row-reverse | column | column-reverse; */
  flex-direction: column;
}
.wrap {
  /* flex-wrap: nowrap | wrap | wrap-reverse; */
  flex-wrap: wrap;
}
.justify-content {
  /* align-items: flex-start | flex-end | center | baseline | stretch; */
  align-items: center;
  /* justify-content: flex-start | flex-end | center | space-between | space-around; */
  justify-content: space-around;
}