Elements position (display)

Elements position (display)#

By default, HTML elements are usually displayed one by one from the top of the page to the bottom of the page, but sometimes you need to change this. So this page discusses some features associated with options to change this.

You can regulate it with display css option. Read more about this property here. Long story short, you need to specify the `display’ option for the elemnt to make it’s children have position in a specific way.

So in following example you can compare elements where display doesn’t specified and elements where display: flex:

  • By default, elements goes one by one verticaly and took all wide of the page;

  • With display: flex elements move one at a time from the left border, taking up only the space they need.

%%HTML
<div>
    <div style="border : black solid">display doesn't specified</div>
    <div style="border: black solid">display doesn't specified</div>
</div>
<hr>
<div style="display: flex;">
    <div style="border : black solid">display: flex</div>
    <div style="border : black solid">display: flex</div>  
</div>
display doesn't specified
display doesn't specified
display: flex
display: flex