css - Flexbox align items horizontally -
this question has answer here:
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
Post a Comment