Flexbox

by Pritam Bohra

HTML

<div class="flex-container">
<!--   <div class="flex-item">1
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum similique suscipit tenetur deserunt blanditiis explicabo eius sint reiciendis ullam nostrum, laudantium molestias, sed illum, iste atque quasi doloremque deleniti consequatur.</p>
  </div>
  
  <div class="flex-item">2
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, aspernatur.</p>
  </div> -->
  
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

CSS

.flex-container {
  margin-bottom: 100px;
  display: flex;
  /* flex-direction: row-reverse; */
  /* justify-content: flex-end/center/space-between/space-around; */
}

.flex-item {
  border: 1px solid red;
  padding: 10px;
  /* width: 20%; */
}