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 use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
Related Article