Flexbox adalah model tata letak CSS (atau properti) yang memungkinkan Anda bekerja dengan mudah dengan banyak kolom dan baris. Hasilnya, Anda dapat dengan cepat membangun tata letak, membuatnya responsif, dan melakukan berbagai hal lainnya.
.
display: flex; .&nbsp;
Anda dapat membuat wadah induk di dalamnya, memiliki banyak anak, dan mengatur banyak karakteristik berdasarkan kebutuhan Anda menggunakan properti flex. . Pertama dan terpenting, Anda harus memberikan arahan; atau yang lain, itu hanya akan menjadi satu baris. .&nbsp;
Anda bahkan dapat menentukan arah sebagai baris, misalnya. .&nbsp;
flex-direction: row;&nbsp;

<img src="https://miro.medium.com/max/700/1*KeAJrMEjYXS_PV6xuDN5wg.png" alt="undefined" style="height: auto;width: auto"/>


.&nbsp;
Demikian pula, Anda dapat menentukan arah sebagai kolom, misalnya
.&nbsp;
flex-direction: column;&nbsp;
.&nbsp;
<img src="https://miro.medium.com/max/700/1*p1L6tIZDlaQDTeCZrAEtFg.png" alt="undefined" style="height: auto;width: auto"/>
.&nbsp;
.&nbsp;&nbsp;
Biarkan saya memberikan contoh lain. Saya telah mengambil tangkapan layar dari halaman web yang dibagikan di Pinterest.&nbsp;
.&nbsp;&nbsp;
.&nbsp;&nbsp;

<img src="https://miro.medium.com/max/662/1*5UUhwITzxJR67wqLy650dw.png" alt="undefined" style="height: auto;width: auto"/>
. . .
. .&nbsp;&nbsp;
&lt;div style="display:flex;"&gt; &lt;div style="display:flex;flex-direction: column;"&gt;&lt;/div&gt; &lt;div style="display:flex;flex-direction: column;"&gt;&lt;/div&gt; &lt;div style="display:flex;flex-direction: column;"&gt;&lt;/div&gt; &lt;/div&gt;&nbsp;
Setelah itu, kami memiliki dua properti yang lebih penting: align-items dan justify-content. .&nbsp;

<img src="https://miro.medium.com/max/700/1*RLhrj1Tm4g2ZHGpfUpjixg.png" alt="undefined" style="height: auto;width: auto"/>
.&nbsp;&nbsp;
.&nbsp;&nbsp;
Setiap kali Anda menentukan arah fleksibel sebagai baris, sumbu utama yaitu sumbu x dikenal untuk konten pembenaran dan sumbu silang (sumbu y) untuk properti align-items. .&nbsp;
Jika Anda memahaminya, bagus; jika tidak, izinkan saya untuk mengajari Anda dengan lebih mudah. .&nbsp;
Properti justify-content akan diterapkan secara horizontal, sedangkan properti align-items akan diterapkan secara vertikal. .&nbsp;
Sekarang pertimbangkan contoh flex-direction sebagai kolom.
.&nbsp;

<img src="https://miro.medium.com/max/700/1*Q6I0Q9ZwpQnLQKwS9TA67A.png" alt="undefined" style="height: auto;width: auto"/>
.
Demikian pula, jika flex-direction ditetapkan sebagai kolom, sumbu x akan untuk align-item dan sumbu y akan untuk justify-content. .
Ya, properti align-items dan justify-content untuk baris dan kolom adalah kebalikannya. &nbsp;

Flexbox adalah model tata letak CSS (atau properti) yang memungkinkan Anda bekerja dengan mudah dengan banyak kolom dan baris. Hasilnya, Anda dapat dengan cepat membangun tata letak, membuatnya responsif, dan melakukan berbagai hal lainnya.

Mempelajari CSS Flexbox Dalam 5 Menit