Flexbox: Satır başına 4 öğe

Sayfamla dinamik olarak yeniden boyutlandırılacak 8 öğeyi görüntülemek için esnek bir kutu kullanıyorum. Öğeleri iki satıra bölmeye nasıl zorlarım? (Satır başına 4)?

İşte ilgili bir snip:

(Veya, jsfiddle'ı tercih ediyorsanız - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</div> </div>
102
[Güncelleme] Bu soru cevap vermeyen kötü bir tasarıma dayanıyordu. Kendinizi aşağıdaki cevaplardan birini kullanarak bulursanız, dikkatli olun. İyi bir tasarımda daha geniş ekranlarda daha çok, daha küçük ekranlarda daha az öğeye sahip olacaksınız. Tüm ekran boyutları için 4 öğe zorlamak, yalnızca dar bir ekran genişliği aralığında çekici görünecektir.
katma yazar Vivek Maharajh, kaynak

7 cevap

.child öğelerine bir genişlik ekleyin. Satır başına her zaman 4 olmasını istiyorsanız, kişisel olarak kenar boşluğu 'da yüzdeleri kullanırdım.

DEMO

.child {
    display: inline-block;
    background:blue;
    margin:10px 0 0 2%;
    flex-grow: 1;
    height:100px;
    width: calc(100% * (1/4) - 10px - 1px);
}
87
katma
Flexbox spec, esnek öğeler üzerinde yüzde dolguları ve kenar boşluklarını kullanmamalarını önerir. Tarayıcılarda farklı şekilde işlem yaparlar. stackoverflow.com/q/36783190/3597276
katma yazar Michael_B, kaynak
Yine de yüzde marjına ihtiyacınız yok. Ayrıca calc gerekmez. Kenar boşluğunu her yerde 5 piksel ve genişliğini% 20 olarak ayarlayın. Bu, satır başına sadece 4 öğe zorlar ve esnek büyür: 1, kalan alanı doldurursunuz.
katma yazar Michael_B, kaynak
Öyleyse, bu konuda esneklik nedir?
katma yazar twicejr, kaynak
Duyarlı tasarım ne olacak? Çocuğa sabit genişlik koymak istemiyoruz
katma yazar candlejack, kaynak
İyi bir fikir. Bu fikri küçük düzenlemelerle kullandım. jsfiddle.net/vivmaha/oq6prk1p/6
katma yazar Vivek Maharajh, kaynak
Evet, kalk çözer! 'hesaplanan (% 100 * (1/4) - 10 piksel - 1 piksel)'. Bakınız jsfiddle.net/vivmaha/oq6prk1p/9
katma yazar Vivek Maharajh, kaynak
Ah. Bu aslında sorunumu çözmüyor. Örnek için buraya bakın: jsfiddle.net/vivmaha/oq6prk1p/7 . Marjım için yüzde kullanma özgürlüğüne sahip değilim. Sabit genişlikte olmalılar. Bu, seçtiğimiz sihirin% 23'ünün işe yaramayacağı anlamına geliyor çünkü sabit marjı hesaba katmıyor.
katma yazar Vivek Maharajh, kaynak

Kapta flex-wrap: wrap kodunuz var. Bu iyidir, çünkü nowrap olan varsayılan değeri geçersiz kılar ( kaynak ). Bu, öğelerin bazı durumlarda bir ızgara oluşturmak için sarılmamasının nedenidir.

Bu durumda, asıl sorun, esnek öğeler üzerinde flex-grow: 1 'dir.

flex-grow özelliği aslında esnek öğeleri boyutlandırmaz. Görevi kapta boş alan dağıtmaktır ( kaynak ). Böylece ekran boyutu ne kadar küçük olursa olsun, her bir öğe satırdaki boş alanın orantılı bir bölümünü alır.

Daha spesifik olarak, kabınızda sekiz esnek eşya var. flex-grow: 1 ile her biri hattaki boş alanın 1/8'ini alır. Öğelerinizde içerik olmadığından, sıfır genişliğe daraltabilir ve asla sarılmaz.

Çözüm, öğelerde genişlik tanımlamaktır. Bunu dene:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
</div> </div>

flex kısaltmasında tanımlanan flex-grow: 1 ile flex-based 'ın% 25 olması gerekmez; kenar boşlukları nedeniyle satır başına üç öğe.

flex-grow satırda boş alan kullanacağından, flex-base yalnızca sarmayı zorlayacak kadar büyük olmalıdır. Bu durumda, esnek temeli:% 21 ile kenar boşlukları için yeterince boş alan bulunur, ancak beşinci bir öğe için hiçbir zaman yeterli alan olmaz.

80
katma
“Çok fazla kar marjı verirseniz, düzen bozulabilir” Bu, kaçınmak istediğim bir senaryo örneğidir. Ben pratiklik umrumda değil; mükemmellik benim hayranlığı eğlendirmek. Daha kesin olmak için herhangi bir yolu var mı?
katma yazar Jackson, kaynak
Bunu sevdim çünkü benim için işe yaradı, ancak “çok fazla alan” beni biraz tedirgin ediyor. Bu “tahminin” başarısız olabileceği küçük bir pencere veya durum var mı?
katma yazar Jackson, kaynak
Ne tür bir durum? Çoğu düzende problem yaratabilecek aşırı durumlar vardır. Bu gibi durumlar normalde maliyet-fayda analizleri ile seyreder, çünkü asla veya neredeyse hiç gerçekleşmezler. Örneğin, yukarıdaki çözümde, çok büyük kenar boşlukları koyarsanız, düzen bozulabilir. Eğer bu bir sorunsa, o zaman soruda belirtilmesi gerekir. @Jackson
katma yazar Michael_B, kaynak
Bu, aslında gerçek cevabıdır. Duyarlı, temiz ve geçerli.
katma yazar candlejack, kaynak
Ayrıca flex: 1 0 calc (25% - 10px); öğesini kullanabilirsiniz.
katma yazar MarkG, kaynak

İşte başka bir yaklaşım.

Bunu da bu şekilde başarabilirsiniz:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

Sample: https://codepen.io/capynet/pen/WOPBBm

And a more complete sample: https://codepen.io/capynet/pen/JyYaba

27
katma
Peki ya 4 yaşından küçük çocuğum varsa? O boş boş alandan hoşlanmıyorum, çocuk duyarlı değil ...
katma yazar candlejack, kaynak

İşte calc() kullanmadan başka bir yol.

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333/2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

Hepsi bu kadar. Daha estetik bir boyut elde etmek için boyutlarla süslü olabilirsiniz, ama bu fikir.

12
katma
Bunu test etmedim, ancak CSS sözdizimi yanlıştır (CSS değerleri belirtilmez ve bildirimler noktalı virgülle bitmelidir), bu nedenle kesinlikle şu anki haliyle çalışmaz.
katma yazar Nick F, kaynak
    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

Hope it helps. for more detail you can follow this link

8
katma

Bu örneğin daha fazla barebone ve anlaşılması daha kolay olduğuna göre @dowomenfart'a inanıyorum.

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

Bu, doğrudan ete kesim yaparken aynı genişlik hesaplamalarını gerçekleştirir. Matematik çok daha kolay ve em yeni standart , ölçeklenebilirliği ve mobil dostu olması nedeniyle.

1
katma
em gerçekten yeni bir standart değil. Kıçındaki bir acı olabilir ve tasarımcılar EM'leri göz önüne alarak tasarlamazlar.
katma yazar Danny van Holten, kaynak

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.parent-wrapper {
        height: 100%;
        width: 100%;
        border: 1px solid black;
}
        .parent {
        display: flex;
        font-size: 0;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-bottom: -10px;
}
        .child {
        background: blue;
        height: 100px;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: calc(25% - 10px);
}
        .child:nth-child(even) {
        margin: 0 10px 10px 10px;
        background-color: lime;
}
        .child:nth-child(odd) {
        background-color: orange; 
}
<!DOCTYPE HTML>

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        
</head>
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>
</div> </div>

;)

0
katma
Bu çocuk sabit genişlikte olduğunda çalışmaz.
katma yazar Adrian, kaynak
Lütfen bunun neden OP mesajını sadece kod gönderme yerine yanıtladığına ilişkin bir bağlam ekleyebilirsiniz.
katma yazar d219, kaynak
Eğer prime justify-content: space-evenly; eklerseniz, bunlar hizaya uygun olur ve çocuğa calc yapmak zorunda kalmazsınız. Yine de örnek için teşekkürler!
katma yazar Mattijs, kaynak