Flexbox

<div class="flex">عناصر بجانب بعضها</div>

<div class="flex flex-row">أفقي (الافتراضي)</div>
<div class="flex flex-col">عمودي</div>

<div class="flex justify-center">توسيط</div>
<div class="flex justify-between">توزيع بمسافات</div>
<div class="flex justify-end">للنهاية</div>

<div class="flex items-center">توسيط عمودي</div>
<div class="flex items-start">للأعلى</div>

<div class="flex gap-4 flex-wrap">عناصر بفراغ تلتفّ عند الحاجة</div>

<div class="flex">
  <div class="flex-1">يملأ المساحة</div>
  <div class="flex-none">حجم ثابت</div>
</div>

<nav class="flex items-center justify-between p-4">
  <div>الشعار</div>
  <div class="flex gap-4">روابط</div>
</nav>