J'apprends actuellement Flexbox Layout et je ne trouve pas de solution à mon problème.
J'ai essayé avec justify-content et flex-base mais cela ne fonctionne pas. Quelqu'un at-il la solution?
Le résultat que je voudrais: 
p >
<section> <div class="column" id="first">First</div> <div class="column" id="second">Second</div> <div class="column">Third</div> </section> <section> <div class="column">First</div> <div class="column">Second</div> <div class="column">Third</div> <div class="column">Fourth</div> </section>
section {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.column {
width: 100%;
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 0;
}
https://jsfiddle.net/qdsbacvn/
p>
3 Réponses :
Vérifiez mon code. J'ai légèrement augmenté la valeur de la boîte flexible.
<section> <div class="column" id="first">First</div> <div class="column">Second</div> <div class="column">Third</div> </section> <section> <div class="column">First</div> <div class="column">Second</div> <div class="column">Third</div> <div class="column">Fourth</div> </section>
section {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.column {
width: 100%;
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#first {
flex-grow: 2.2;
flex-shrink: 2;
flex-basis: 0;
}
Merci c'est parfait mais pouvez-vous m'expliquer comment et pourquoi la valeur de 2,2 sur les propriétés flex-grow a résolu mon problème?
Le problème vient de la marge et du remplissage, si vous le définissez sur zéro, il est correctement aligné.
Vous avez raison, j'ai essayé sans nous. Cela confirme l'explication ci-dessus. Je vous remercie !
@maher, il y a des programmeurs plus expérimentés que moi, qui peuvent vous donner de meilleures réponses.
Toutes vos réponses sont excellentes si elles peuvent aider les autres ;-)
Ceci est un cas d'utilisation parfait pour la grille CSS où vous n'avez pas besoin de beaucoup de code complexe:
<section> <div class="column" id="first">First</div> <div class="column" id="second">Second</div> <div class="column">Third</div> </section> <section> <div class="column">First</div> <div class="column">Second</div> <div class="column">Third</div> <div class="column">Fourth</div> </section>
section {
display: flex;
}
.column {
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-basis:4%; /*2 x (padding + margin)*/
}
Avec flexbox, vous pouvez essayer ce qui suit:
<section> <div class="column" id="first">First</div> <div class="column" id="second">Second</div> <div class="column">Third</div> </section> <section> <div class="column">First</div> <div class="column">Second</div> <div class="column">Third</div> <div class="column">Fourth</div> </section>
section {
display: grid;
margin: 2% auto;
grid-gap:2%;
grid-template-columns:repeat(4,1fr);
}
.column {
background-color: #e2e2e2;
padding: 5px;
}
#first {
grid-column:span 2;
}
Puisque vous utilisez flex-base: 0 , seul le remplissage / marge est pris en compte avant de calculer l'espace libre. L'astuce est de s'assurer que nous avons le même espace libre dans les deux situations, nous ajoutons donc à flex-base du gros élément la marge / remplissage qui n'est pas présent dans le premier cas. >
Merci beaucoup, ce n'est pas une mise en page Flexbox mais je garde cela quelque part dans ma tête. J'apprendrai très bientôt CSS Grid ;-)
@maher a ajouté une solution flexbox;)
Je commence à comprendre la logique du problème de marge grâce à votre code. J'apprécie vraiment merci
@maher non seulement la marge, mais aussi le remplissage, a ajouté plus de détails
Des solutions très propres. Bon travail.
Un peu exagéré pour votre cas d'utilisation, mais une solution beaucoup plus robuste au cas où vous auriez besoin d'ajouter plus de lignes ou que vos marges devraient changer de taille.
<div class="parent">
<div class="column">
<div class="col-row">
<div>First</div>
</div>
<div class="col-row">
<div>First</div>
<div>Second</div>
</div>
</div>
<div class="column">
<div class="col-row">
<div>Second</div>
</div>
<div class="col-row">
<div>Third</div>
</div>
</div>
<div class="column">
<div class="col-row">
<div>Third</div>
</div>
<div class="col-row">
<div>Fourth</div>
</div>
</div>
</div>
.parent {
display: flex;
flex-direction:row;
}
.column {
flex:1;
display:flex;
flex-direction:column
}
.column:first-child {
flex:2;
}
.col-row {
flex:1;
display:flex;
flex-direction:row;
}
.col-row > div{
flex:1;
display:flex;
flex-direction:row;
margin:1vw;
padding:1vw;
background-color: #e2e2e2;
}
C'est très intéressant, le html est plus précis / structuré que le mien et le résultat est parfait. Je vais essayer de reproduire cela. Merci pour votre réponse :-)
Trop compliqué, flex-direction: la ligne est par défaut.
@VXp Puisque l'OP n'est clairement pas très familier avec flexbox, la seule ligne supplémentaire pour être explicite semble en valoir la peine
Juste une ligne de css inutile qui pour certains peut se transformer en habitude, donc prudence, fragile, manipuler avec précaution ou mieux ne pas manipuler du tout, laissez-le tranquille, dans le coin auquel il appartient. Puisque l'OP ne l'utilise pas, je suis presque sûr de sa conscience.
C'est vrai, j'en suis conscient, mais c'est agréable de comprendre le code (peut-être devriez-vous le mettre en commentaire? Pour la compréhension des débutants).
Quelle est votre disposition attendue? votre premier élément de la rangée du haut est plus petit que les deux en dessous en raison de leurs marges.
J'ajoute une photo du résultat que je souhaite afficher sur mon post. Merci pour votre réponse
Vous n'avez pas besoin de marge: 0 auto et justify-content: espace entre, largeur: 100% est par défaut, peut être fait avec un seul élément parent (section) etc.
Oh tu as raison! Merci pour le rappel ;-)