Flex elements in CSS
In addition to the types of block models we have studied, there is another one - flex elements. In order to obtain such elements, you need to write the parent property of these elements to the value display flex. The parent itself will remain a block element, but its descendants will become flex elements.
Flex items, like block items, can have a width and height of margin and padding. However, unlike block items, by default flex items are aligned within their parent.
Let's try:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* descendants will be flex elements */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
