flexbox 항목을 같은 크기로 만드는 방법은 무엇입니까?

너비가 모두 같은 일부 항목이있는 flexbox를 사용하고 싶습니다. flexbox가 공간 자체가 아닌 공간을 균등하게 분산시키는 것으로 나타났습니다.

예를 들면 다음과 같습니다.

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

첫 번째 항목은 두 번째 항목보다 훨씬 큽니다. 3 개 항목, 4 개 항목 또는 n 개 항목이있는 경우 모든 항목이 같은 줄에 항목 당 동일한 공간으로 표시되기를 원합니다.

어떤 아이디어?

http://codepen.io/anon/pen/gbJBqM

자신이 너무 그들을 설정 flex-basis입니다 0(모든 요소가 동일한 출발점이 때문에), 그 성장 할 수 있습니다 :

flex: 1 1 0px

IDE 또는 linter가 언급 할 수 있습니다 the unit of measure 'px' is redundant. ()와 같이 그대로두면 flex: 1 1 0IE는 이것을 올바르게 렌더링하지 않습니다. 따라서 px@fabb의 의견에서 언급했듯이 Internet Explorer를 지원해야합니다.

flex-basis: 100%이를 달성하기 위해 추가 할 수 있습니다 .

업데이트 된 예

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

그 가치 flex: 1에 따라 동일한 결과 에도 사용할 수 있습니다 .

의 속기 flex: 1와 동일한 flex: 1 1 0등가이다 :

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

width: 0항목의 내용이 커질 경우 열을 동일하게 만들 려면 추가해야합니다 .

.item {
  flex: 1 1 0;
  width: 0;
}

Adam ( flex: 1 1 0) 이 허용하는 답변 은 너비가 고정되거나 조상에 의해 결정된 flexbox 컨테이너에 완벽하게 작동합니다. 아이들이 용기에 맞는 상황.

그러나 가장 큰 하위를 기준으로 동일한 크기의 하위 컨테이너를 갖는 컨테이너를 하위 컨테이너에 맞추려는 상황이있을 수 있습니다. 다음 중 한 가지 방법으로 flexbox 컨테이너를 자식에 맞출 수 있습니다.

• 설정 position: absolute하지 설정 width하거나 right, 또는
• 래퍼 안에 넣습니다. display: inline-block

이러한 인 flexbox 용기의 경우, 허용 대답은 수행 하지 작업을, 아이들은 같은 크기되지 않습니다. flexbox의 한계라고 생각합니다. Chrome, Firefox 및 Safari에서도 동일하게 동작하기 때문입니다.

해결책은 flexbox 대신 격자를 사용하는 것입니다.

데모 : https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

플렉스에 대한 전문가는 없지만 내가 다루고있는 두 가지 항목의 기준을 50 %로 설정하여 거기에 도달했습니다. 1로 증가하고 0으로 줄입니다.

인라인 스타일링 : flex: '1 0 50%',