display: flex;

1. Container display must be set to flex

 

display:-webkit-flex;

display: -ms-flexbox;

display: flex;

 

<style>
.container {
  display: flex;
  height: 150px;
  background: grey;
}
.flex-item {
  width: 100px;
  height: 100px;
  margin: auto;
  background: white;
}
</style>
<div class="container">
  <div class="flex-item">Child flex item 1</div>
  <div class="flex-item">Child flex item 2</div>
  <div class="flex-item">Child flex item 3</div>
  <div class="flex-item">Child flex item 4</div>
  <div class="flex-item">Child flex item 5</div>
  <div class="flex-item">Child flex item 6</div>
</div>

 

 

Parent Container

Child flex item 1
Child flex item 2
Child flex item 3
Child flex item 4
Child flex item 5
Child flex item 6

Leave a Reply

Your email address will not be published. Required fields are marked *