요소에 동일한 폭을 제공하지 않는 Flexbox

요소에 동일한 폭을 제공하지 않는 Flexbox

최대 5개 항목, 최소 3개 항목으로 구성된 플렉스박스 탐색을 시도하지만 모든 요소 간에 폭을 균등하게 나누지는 않습니다.

피들

제가 모델링하는 튜토리얼은 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>

링크한 기사에 언급되지 않은 중요한 부분이 있습니다.flex-basis기본적으로flex-basis이라auto.

사양에서:

지정된 flex-basis가 auto인 경우 사용되는 flex basis는 flex 항목의 기본 크기 속성 값입니다. (이것 자체는 내용에 따라 flex 항목의 크기를 조정하는 키워드 auto가 될 수 있습니다.)

각 플렉스 항목은 다음이 있습니다.flex-basis초기 크기와 비슷한 크기입니다.그런 다음 나머지 빈 공간은 다음과 같이 비례적으로 분배됩니다.flex-grow) 항목 중에서.와 함께auto그 기준은 콘텐츠 크기(또는 정의된 크기)입니다.width등).따라서 텍스트가 큰 항목은 예제에서 전체적으로 더 많은 공간이 제공됩니다.

요소를 완전히 균일하게 하려면 다음과 같이 설정할 수 있습니다.flex-basis: 0이렇게 하면 플렉스 기저가 0으로 설정되고 남은 공간(모든 기저가 0이므로 모든 공간이 됨)은 다음을 기준으로 비례적으로 분포됩니다.flex-grow.

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

사양의 이 다이어그램은 포인트를 꽤 잘 설명합니다.

그리고 여기 당신의 바이올린을 사용한 작업 예가 있습니다.

@James Montagne 답변에서 설명한 것처럼.flex-basis: 0열 내용이 너비를 강제하지 않고 래핑할 수 있기 때문에 이 경우 작동하는 Flexbox 열이 고르게 분포되도록 합니다.그러나 열 내용의 너비가 강제되는 경우(예: 이미지 너비 또는 공백: nowrap), 솔루션은 다음과 같이 설정합니다.min-width: 0...

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

너비가 동일한 요소를 작성하려면Flex자녀(가변 요소)로 설정해야 합니다.

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

25% 너비의 행에 있는 모든 요소가 표시됩니다.그들은 자라지 않고 하나씩 갈 것입니다.

솔루션:

flex: 1;

OR

.flex-child-items{
   flex-grow: 1;
} 

설명:

만약 당신이.display: flex그것은 모든 항목을 수평으로 정렬하고 너비는sum어린이 너비(내용에 따라 다르거나 때로는)width재산).

예:

정상 플렉스

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

이제 공간을 모든 공간에 동일하게 나누고 싶다고 가정해 보겠습니다.이 작업을 수행하려면 추가flex-grow: 1 (이에서는 A,B, (이 예에서는 A, B, C) 모든한어게적에다니용됩린이유연.

.A, .B, .C {
    flex-grow: 1;
}

이후에는 다음과 같이 표시됩니다.

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*BTW, 위의 예제 상자가 중심이 아닌 것 같으면 죄송합니다만, 코드 작업은 프로젝트에서 시도해 보십시오.

플렉스는 모든 경우에 어린이에게 동일한 폭을 제공하지 않을 수 있습니다.

동일한 너비 요소에 대해 CSS 그리드를 사용합니다.

.el{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr
}

참조 https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

만약 당신이 CSS 플렉스만을 사용하고 싶다면, 몇 가지 옵션이 있습니다.

1. flex-basis: 100%모든 아이들에게, 이것은 접전이 될 것입니다.
2. flex-basis: 0은 첫 번째 보다 덜 합니다.

언급URL : https://stackoverflow.com/questions/25066214/flexbox-not-giving-equal-width-to-elements