요소에 동일한 너비를 제공하지 않는 Flexbox

368

최대 5 개의 항목과 3 개의 작은 항목을 가진 flexbox 탐색을 시도하지만 모든 요소간에 너비를 균등하게 나누지는 않습니다.

깡깡이

내가 모델링 한 튜토리얼은 http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 입니다 .

SASS

* {
  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>

스 니펫 확장

html css flexbox

— 그 클라크
소스

테이블에 최소 너비를 지정하고 vw 단위로 패딩을 설정하면 도움이 될 수 있습니다. jsfiddle.net/2nY9N/2 flex-grow를 삭제하고 flex : 1을 수행하십시오. 그것은 2 개 defaut에 다른 특성에 대한 값을 사용한다

— G-Cyrillus

flexbox를 사용하여 동일한 부분으로 나누는 방법의

— Gajus

답변:

907

당신이 연결 한 기사에서 언급되지 않은 중요한 부분이 flex-basis있습니다. 기본적으로 flex-basis입니다 auto.

에서 사양 :

지정된 플렉스 기준이 자동 인 경우 사용 된 플렉스 기준은 플렉스 항목의 기본 크기 속성 값입니다. (자체는 내용에 따라 flex 항목의 크기를 지정하는 키워드 auto 일 수 있습니다.)

각 플렉스 아이템은 flex-basis초기 크기와 비슷한 것을 가지고 있습니다. 그런 다음 남은 여유 공간이 flex-grow항목들 사이 에 비례 적으로 분배 됩니다. 로 auto, 그 기준은 내용 크기 (또는로 정의 된 크기 width등)입니다. 결과적으로 텍스트가 더 큰 항목은 예제에서 전체적으로 더 많은 공간이 제공됩니다.

요소를 완전히 균일하게하려면을 설정할 수 있습니다 flex-basis: 0. 이렇게하면 플렉스 기준이 0으로 설정되고 나머지 공간 (모든 기준이 0이므로 모든 공간이 됨)이에 따라 비례 적으로 분배됩니다 flex-grow.

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

사양의이 다이어그램 은 요점을 잘 설명해줍니다.

그리고 여기 당신의 바이올린과 함께 작동하는 예가 있습니다.

— 제임스 몬타 그네
소스

이것은 Safari에서 나를 감싸고 있습니다.

— 눈사람

이 답변에 대한 멋진 점은이 예제를 사용하여 말 그대로 전체 인터넷의 다른 곳보다 flex-basis를 더 잘 설명한다는 것입니다. 명예 교수직에 관해 MIT에 연락 할 것입니다.

— dudewad

그냥 그 언급 flex: 1;의 조합에 대한 속기입니다 flex-grow: 1, flex-basis: 0.

— Vadim Ovchinnikov

누군가가 깊이 알고 싶다면 웹 에서이 위대한 기사를 보았습니다

— Kuldeep Kumar

오, CSS를 잡고 있다고 생각했을 때 항상 머리에 부딪쳤다.

— ibic

를 사용하여 너비가 같은 요소를 만들려면 Flex자녀의 자녀 (플렉스 요소)로 설정해야합니다.

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

25 % 행의 모든 요소에 적용됩니다. 그들은 하나씩 성장하지 않을 것입니다.

— alexJS
소스

이것은 플렉스의 이점을 완전히 감소시키기 때문에 꽤 어색합니다. 열 크기를 하드 코딩하려는 경우 더 쉽게 해결할 수있는 방법이 있습니다.

— Kloar

그것은 전혀 잘못이 아닙니다 .. 같은 길이의 상자를 갖고 싶어하고 줄이 완전히 채워 졌을 때 고장 나면 .. 이렇게 쉽게 달성 할 수 있습니다. 최소 너비가 필요한 경우 최소 너비로 설정

— Ilario Engler

@Kloar 당신은 그것이 flexboxes의 유일한 이점 인 것처럼 말입니다 ... 그것들은 같은 폭을 필요로 할 때, 예를 들어 반응성에 대해 여전히 여전히 유리할 수 있습니다. 또한 flexbox가 쉽지 않은 것은 아닙니다.

— user2999349