it-swarm.dev

Flexbox لا يعطي عرض متساوي للعناصر

محاولة التنقل في flexbox التي تحتوي على ما يصل إلى 5 عناصر وأقل من 3 عناصر ، ولكنها لا تقسم العرض بالتساوي بين جميع العناصر.

Fiddle

البرنامج التعليمي الذي أعرضه بعد ذلك هو http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

ساس

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}
<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>
276
itsclarke

هناك جزء مهم غير مذكور في المقالة التي ربطتها وهو flex-basis. بشكل افتراضي flex-basis هو auto.

من المواصفات :

إذا كان أساس المرن المحدد تلقائيًا ، فإن أساس المرن المستخدم هو قيمة خاصية الحجم الرئيسية لعنصر المرن. (يمكن أن تكون هذه هي الكلمة الرئيسية تلقائيًا ، والتي تعمل على تغيير حجم العنصر المرن استنادًا إلى محتوياته.)

كل عنصر مرن يحتوي على flex-basis يشبه حجمه الأولي. ثم من هناك ، يتم توزيع أي مساحة خالية متبقية بالتناسب (بناءً على flex-grow) بين العناصر. باستخدام auto ، يكون هذا الأساس هو حجم المحتويات (أو الحجم المحدد مع width ، إلخ). نتيجة لذلك ، يتم توفير مساحة أكبر بشكل عام للعناصر التي تحتوي على نص أكبر بداخلك.

إذا كنت تريد أن تكون عناصرك متساوية تمامًا ، فيمكنك تعيين flex-basis: 0. سيؤدي ذلك إلى تعيين الأساس المرن على 0 ثم سيتم توزيع أي مساحة متبقية (والتي ستكون كل المساحة لأن كل الأساسات هي 0) بالتناسب على أساس flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

هذا المخطط من المواصفات يقوم بعمل جيد للغاية لتوضيح هذه النقطة.

و هنا مثال عملي مع كمان لديك.

700
James Montagne

لإنشاء عناصر متساوية العرض باستخدام Flex ، يجب عليك تعيينه على طفلك (عناصر مرنة):

flex-basis: 25%;
flex-grow: 0;

سيعطي لجميع العناصر في عرض الصف 25 ٪. لن تنمو وتذهب واحدة تلو الأخرى.

7
alexJS