Flexbox 항목을 동일한 크기로 만드는 방법

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), 그 합니다 (따라서모요동든시일가작지며수있다습확니을장점할요소한를는소▁(:▁have),따(▁them▁and다있수습▁elements니so).

flex: 1 1 0px;

가 IDE를 .the unit of measure 'px' is redundant 생할경예우략예(경:우:▁if:flex: 1 1 0을 올바르게 것입니다.), IE는 다음과 같습니다.그래서 그px는 @fabb의 Internet 하는 데 합니다.

추가해야 .width: 0항목의 내용으로 인해 크기가 커지면 열을 동일하게 만듭니다.

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

정보 flex: 1 1 0는 와동합다니와 . flex-grow: 1; flex-shrink: 1; flex-basis: 0;그리고 상위 컨테이너가 모든 항목의 네이티브 크기를 함께 추가할 수 있는 충분한 공간을 제공할 수 없다면(성장할 공간이 없음),width: 0모든 항목에 성장을 위한 동일한 시작점을 부여합니다.

추가할 수 있습니다.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;
}

아담이 인정한 대답 (flex: 1 1 0는 너비가 고정되거나 조상에 의해 결정되는 Flexbox 컨테이너에 완벽하게 작동합니다.어린이가 용기를 장착하기를 원하는 상황.

그러나 가장 큰 어린이를 기준으로 어린이의 크기가 동일하도록 용기가 어린이에게 맞도록 하려는 상황이 발생할 수 있습니다.다음 중 하나를 사용하여 Flexbox 컨테이너를 자식에 맞게 만들 수 있습니다.

• 팅세position: absolute하지 width또는right또는
• 그것을 포장지 안에 넣습니다.display: inline-block

이러한 플렉스박스 용기의 경우 승인된 답변이 작동하지 않으며 어린이의 크기가 동일하지 않습니다.이것은 크롬, 파이어폭스, 사파리에서 똑같이 동작하기 때문에 플렉스박스의 한계라고 생각합니다.

해결책은 플렉스 박스 대신 그리드를 사용하는 것입니다.

이 스니펫을 실행할 때 효과를 제대로 보려면 전체 페이지를 클릭하십시오.

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;
}

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

제가 Flexbox 전문가는 아니지만, 제가 취급하는 두 가지 항목에 대해 기준을 50%로 설정하여 거기에 도달했습니다.1로 성장하고 0으로 축소합니다.

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

이러한 솔루션 중 어떤 것도 저에게 효과가 없었습니다.

.header {
  display: flex;
}

.item {
  width: 100%;
}


/* Demo styles, for aesthetics. */

.demo {
  margin: 3rem;
}

.demo .item {
  text-align: center;
  padding: 3rem;
  background-color: #eee;
  margin: 0 1.5rem;
}

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
  </div>
</div>

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
  </div>
</div>

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
    <div class="item">
      4
    </div>
    <div class="item">
      5
    </div>
  </div>
</div>

이 답변들 중 어느 것도 제 문제를 해결하지 못했습니다. 임시 플렉스박스 테이블의 항목이 너무 작은 폭으로 줄어들었을 때 같은 폭이 아니라는 것입니다.

제가 해결할 수 있는 방법은 간단히 말하자면overflow: hidden;에서flex-grow: 1;세포

플렉스의 자식 요소에,

flex: 1 1 25%

이렇게 하면 4개의 항목을 가질 수 있습니다.

더 많은 항목을 추가하려면 다음 항목을 줄일 수 있습니다.%.

이것은 그리드와 같은 항목을 래핑하더라도 작동하지만 미디어 쿼리에서 래핑할 위치를 표시해야 할 정도로 간단하지는 않습니다.)

예:

.flex-item {
    flex: 0 0 calc(25% - (45px / 4))
}

다음과 같이 작동합니다.

$n: 4; // Number of columns
$gap: 15px; // Margin pixels

.flex-parent {
    display: flex;
    gap: $gap;
}
.flex-item {
    flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}

저도 비슷한 문제를 겪고 있었는데 부정행위를 할 수 있는 방법을 찾았습니다.

다른 사람들이 말했듯이,flex-basis그리고.flex-grow: 1항목을 동일한 크기로 유지하는 방법이지만, 항목이 너무 적은 경우(사용 가능한 모든 공간을 채워 다른 항목보다 큰 경우)에는 마지막 행이 예외입니다.이를 방지하기 위해 다음과 같은 빈 스페이서 항목을 추가했습니다.visibility: hidden설정합니다.flex-grow값은 항목 수를 빠르게 계산하여 항목 수를 빠르게 계산할 수 있습니다.

상위 컨테이너의 너비를 알고 있으면 이 방법이 더 쉬워지지만, 알지 못하더라도 다음을 설정할 수 있습니다.flex-grow미디어 쿼리 및 중단점을 사용하여 스페이서의 값을 지정합니다.

언급URL : https://stackoverflow.com/questions/29503227/how-to-make-flexbox-items-the-same-size