Display property¶

The display property allows us to change the block element into inline and vice versa. One possible value is the inline block, which causes the element to behave like inline element, but has access to the properties of a block element (e.g. we can specify the size).

Often used display property values are:

1. display: none - is used to hide an element.
2. display: inline - makes the element display as an inline element.
3. display: block - makes the element display as a block element.
4. display: inline-block - combines features of inline and block elements. This will allow the element to be given dimensions and all margins, and will not be followed by the next line.
5. display: flex
6. display: grid

Flexbox¶

The value of the flex for the display property controls how all direct elements inside the so-called flexbox are placed. These elements will be placed next to each other in a row or column. This is determined by the flex-direction property, which can take the values of row (default) and column. In addition, the flexbox allows you to easily place elements in a row or column. Properties used for this:

• justify-content
• align-items

For example, to center all elements in the div tag (vertical and horizontal), which is flexbox, we can use the following code:

<div class="some-container">
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
</div>

.some-container {
    display: flex;
    justify-content: center;
    align-items: center;
}