The child elements are evenly distributed among the parent elements.
HTML CODE:
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
CSS CODE:
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
Description
- display: flex Enable the elastic case.
- justify-content: space-between Sub-elements are evenly distributed horizontally. The first item is on the left edge and the last item is on the right edge.
Or, use justify-content: space-around to allocate space to child elements, not between them.
Post your comments / questions
Recent Article
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
- Unicode error 'unicodeescape' codec can't decode bytes in position 2-3: truncated UXXXXXXXX escape
- Could not find the 'angular-devkit/build-angular:dev-server' builder's node package | Angular Error
- Error: error:0308010C:digital envelope routines::unsupported
Related Article