4
votes

Comment obtenir des divs flexibles de 33,33% de largeur sur plusieurs lignes?

J'essaie de superposer les divs flex en rangées de 3. Parfois, j'aurai 3 divs, parfois 6 ou 21, etc. J'ai compris les largeurs et les rembourrages, mais je ne sais pas comment les obtenir pour commencer une nouvelle ligne après chaque série de 3.

Comment puis-je y parvenir? Pour le moment, il les met tous sur une seule ligne.

Le code HTML est comme ceci:

width: 33.33%;
height: 100%;
float: left;
flex-grow: 1;

Chaque div flex utilise du CSS comme: p >

<div id="container">

  <div class="sections__container">

        <div class="sections__container__a">A-1</div>
        <div class="sections__container__b">A-2</div>
        <div class="sections__container__c">A-3</div>

        <div class="sections__container__a">B-1</div>
        <div class="sections__container__b">B-2</div>
        <div class="sections__container__c">B-3</div>

  </div> 

</div>

Et voici un jsFiddle pour faciliter les choses: https://jsfiddle.net/xr746syj/

Merci beaucoup pour tout conseil :)

css flexbox

2 commentaires

Je ne suis pas sûr de bien comprendre la question, mais ajouter flex-wrap: wrap à votre flex parent pourrait vous aider à résoudre votre problème.

Float ne fonctionne pas dans flexbox

3 Réponses :

7
votes

Premièrement, vous devez utiliser flex-wrap: wrap pour que vos lignes se cassent au bon endroit.

Deuxièmement, vous utilisez des marges et devez en tenir compte dans votre largeur calculs.

Donc, si vous dites qu'un bloc est 33.33% mais a margin-left: 5px , vous devez utiliser width: calc (33.33% - 5px) .

Enfin, j'ai supprimé les float s de votre code, car ils sont inutiles properties lorsqu'il est appliqué aux enfants flex. Votre code pourrait être considérablement simplifié en créant une classe commune contenant toutes les valeurs partagées entre chaque section.

Voici le code de travail complet:

<div id="container">
  <div class="sections__container">
    <div class="sections__container__a">A-1</div>
    <div class="sections__container__b">A-2</div>
    <div class="sections__container__c">A-3</div>

    <div class="sections__container__a">B-1</div>
    <div class="sections__container__b">B-2</div>
    <div class="sections__container__c">B-3</div>
  </div>
</div>

* {
  box-sizing: border-box;
}

#container {
  width: 600px;
  margin: 0 auto;
  background-color: #ececec;
  padding: 10px;
  margin-bottom: 30px;
}

.sections__container {
  margin: 0 auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.sections__container__a {
  margin-right: 5px;
  width: calc(33.33% - 5px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.sections__container__b {
  margin: 0 5px;
  width: calc(33.33% - 10px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.sections__container__c {
  margin-left: 5px;
  width: calc(33.33% - 5px);
  height: 100%;
  border-radius: 4px;
  flex-grow: 1;
  background-color: #FFFFFF;
  font-size: 0.80rem;
  padding: 15px 0px 10px 0px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

jsFiddle

1 commentaires

Je vais essayer de le simplifier encore plus avec les classes nth . Cela devrait fonctionner :)

5
votes

J'espère que cela vous aidera.

Voici la feuille de triche pour flex pour référence future: https://yoksel.github.io/flex-cheatsheet/

<div id="container">


  <div class="sections__container">
    
    	<div class="sections__container__a">A-1</div>
    	<div class="sections__container__b">A-2</div>
      <div class="sections__container__c">A-3</div>
    
    	<div class="sections__container__a">B-1</div>
    	<div class="sections__container__b">B-2</div>
      <div class="sections__container__c">B-3</div>
    
    </div>


</div>

#container{
  width:600px;
  margin: 0 auto;
  background-color:#ececec;
  padding:10px;
  margin-bottom:30px;
}

.sections__container {
    margin: 0 auto;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
     align-content: stretch;
    justify-content: space-between;
}
.sections__container div {
    width: 30%;
    border-radius: 4px;
    flex-grow: 1;
    background-color: #FFFFFF;
    font-size: 0.80rem;
    padding: 15px 0px 10px 0px;
    font-weight: 600;
    margin:10px;
    text-align: center;
}

0 commentaires

1
votes

J'espère que cela aidera également!

<div id="container">
    <div class="sections__container">
        <div class="col sections__container__a">A-1</div>
        <div class="col sections__container__b">A-2</div>
        <div class="col sections__container__c">A-3</div>
        <div class="col sections__container__a">B-1</div>
        <div class="col sections__container__b">B-2</div>
        <div class="col sections__container__c">B-3</div>
    </div>
</div>

* {
    box-sizing: border-box;
  }

  #container {
    width: 600px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  .sections__container {
    margin-left: -10px;
    margin-right: -10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .sections__container .col {
    -ms-flex: 0 0 calc(33.333% - 20px);
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #eee;
    font-size: 12px;
    padding: 15px;
    font-weight: 600;
    text-align: center;
  }

0 commentaires