Флекс элементҳо дар CSS

Ба ғайр аз намудҳои моделҳои блоқие, ки мо омӯхтем, як намуди дигар низ мавҷуд аст - флекс элементҳо. Барои он, ки чунин элементҳоро ба даст оварем, ба волидайн ин элементҳо бояд хосияти display-ро бо қимати flex навиштем. Худи волидайн ҳамчун унсури блоқӣ боқӣ мемонад, вале фарзандонаш ба флекс элементҳо табдил меёбанд.

Флекс элементҳо, монанди унсурҳои блоқӣ, метавонанд дарозӣ ва баландӣ, margin ва padding дошта бошанд. Аммо, бар хилофи унсурҳои блоқӣ, ба таври пешфарз флекс элементҳо дар дохили волидайни худ дар як саф ҷойгир мешаванд.

Биёед кӯшиш кунем:

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

.parent {
	display: flex; /* фарзандон флекс элементҳо мешаванд */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}