Display property¶

The display property allows you to turn a block element into a linear one and the other way around. One possible value is inline-block, which causes the element to behave like a line element, but has access to the properties of the block element (e.g. we can determine the size).

Commonly used values ​​for the display property are:

1. display: none - to hide an item
2. display: inline - causes the element to be displayed as a line element
3. display: block - the item will be displayed as a block element
4. display: inline-block - combines features of line and block elements (thanks to this it will be possible to give the element dimensions and all margins, and it will not be followed by a transition to the next line)
5. display: flex
6. display: grid

Flexbox¶

The flex value for thedisplay property controls how all direct elements within a so-called flexbox will be arranged. These items will be lined up next to each other in a row or column. This is determined by the flex-direction property, which can take the values ​​ofrow (the default) and column. In addition, flexbox gives you the ability to easily place items in a row or column. The following properties are used for this:

• justify-content
• align-items

For example, if we want to center all elements in a div tag (vertically and horizontally) which is a 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;
}