Flexbox öğeleri aynı boyutta nasıl yapılır?

Hepsi aynı genişlikte bazı öğeleri olan flexbox kullanmak istiyorum. Flexbox'ın, alanı kendisinden ziyade, eşit bir şekilde dağıttığını fark ettim.

Örneğin:

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

İlk öğe ikinciden çok daha büyük. 3 öğem, 4 öğem veya n öğem varsa, hepsinin öğe başına eşit miktarda alanla aynı satırda görünmesini istiyorum.

Herhangi bir fikir?

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

Onların o yüzden onları Set flex-basisolan 0(tüm unsurları aynı başlangıç noktası var bu yüzden) ve büyümelerini sağlar:

flex: 1 1 0px

IDE veya linter'ınız bundan bahsedebilir the unit of measure 'px' is redundant. Dışarıda bırakırsanız (gibi flex: 1 1 0:) IE bunu doğru şekilde oluşturmaz. Bu yüzden px@fabb tarafından yapılan yorumlarda belirtildiği gibi Internet Explorer'ı desteklemek için gereklidir;

Bunu flex-basis: 100%başarmak için ekleyebilirsiniz .

Güncellenmiş Örnek

.header {
  display: flex;
}

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

Değeri flex: 1için, aynı sonuçlar için de kullanabilirsiniz .

Stenografi şununla flex: 1aynıdır flex: 1 1 0:

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

width: 0Öğelerin içeriği onu büyütürse sütunları eşit hale getirmek için eklemeniz gerekir .

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

Adam ( flex: 1 1 0) tarafından kabul edilen cevap , genişliği sabit veya bir ata tarafından belirlenen flexbox kapları için mükemmel çalışır. Çocukların konteynere sığmasını istediğiniz durumlar.

Bununla birlikte, kabın çocuklara uymasını istediğiniz bir durum olabilir, çocuklar en büyük çocuğa göre eşit boyuttadır. Bir flexbox kabını çocuklarından herhangi birine göre yapabilirsiniz:

• ayar position: absolutedeğil widthveya ayarlamama veya right, veya
• ile bir sargı içine yerleştirin display: inline-block

Böyle FlexBox kaplar için, kabul edilen cevap yapar DEĞİL işi, çocuk eşit büyüklükte değildir. Chrome, Firefox ve Safari'de aynı şekilde davrandığından, bunun flexbox'ın bir sınırlaması olduğunu varsayıyorum.

Çözüm, esnek kutu yerine ızgara kullanmaktır.

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

Im flex ile uzman değilim ama ben uğraşan iki öğe için% 50 temel alarak oraya. 1'e büyütün ve 0'a küçültün.

Satır içi stil: flex: '1 0 50%',