Flexbox — رتّب العناصر بجملة

قبل Flexbox كان ترتيب العناصر بجانب بعض معاناة. الآن جملة وحدة:

.row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.box { flex: 1; }

الأب يصير flex، وأبناؤه تصطف بجانب بعض. gap المسافة بينهم، justify-content المحاذاة أفقياً، align-items عمودياً، وflex: 1 تعطي كل صندوق حصة متساوية من العرض. جرب غير center إلى space-between وبتشوف الفرق على طول.