كيفية تعيين عرض موحد للعنصر لأوسع عنصر باستخدام CSS

يمكنك تحقيق التخطيط المطلوب من خلال استخدام flexbox المضمن، كما هو موضح في حل CSS المقدم:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

في CSS هذا، قمنا بتعيين حاوية .list بحيث تحتوي على عرض flexbox مضمّن، مما يضمن عرض عناصر .list التابعة لها أفقيًا. تحتوي عناصر .list على عرض flexbox رأسي، مما يسمح لعناصر .list-item التابعة لها بالتكديس عموديًا.

والأهم من ذلك، أن عناصر .list-item لها خاصية الالتفاف المرن الخاصة بها مضبوطة على الالتفاف. وهذا يعني أنه عندما لا يمكن احتواؤها في سطر واحد داخل حاوية .list الخاصة بها، فإنها ستلتف تلقائيًا إلى السطر التالي.

علاوة على ذلك، قمنا بتعيين خاصية justify-content على flex-start لـ .list- عناصر العنصر، مما يؤدي إلى محاذاتها مع الحافة اليسرى لحاوية .list الخاصة بها. وهذا يضمن أن العنصر الأطول هو الذي يحدد عرض جميع العناصر في القائمة.

من خلال تنفيذ CSS هذا، يمكنك إنشاء تخطيط حيث تكون جميع العناصر بنفس عرض العنصر الأوسع، مما يضمن الحصول على مظهر متسق وممتع من الناحية الجمالية. مظهر.