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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.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;
}

Результат: