css - Flexbox align items horizontally -


is there method align child items in way: [i][i]______[i][i][i], regardless how many items in each of groups?

in flexbox container

  • use justify-content alignment of items horizontally.
  • use align-items align items vertically.

have @ example snippet below:

.parent {    display: flex;    width: 100%;    height: 100px;    align-items: center; /* align items vertically */    justify-content: space-between; /* align items horizontally (with equal space in between each of them */    background: #eee;  }    .children {    display: flex;  }    .child {    margin: 0 5px;    padding: 0 5px;    font-size: 30px;    background: #ccc;    color: #000;  }
<div class="parent">    <div class="children left-children">      <div class="child">1</div>      <div class="child">2</div>      <div class="child">3</div>    </div>    <div class="children right-children">      <div class="child">4</div>      <div class="child">5</div>      <div class="child">6</div>    </div>  </div>

hope helps!


Comments

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -