web-dev-qa-db-fra.com

Centrer verticalement et aligner à gauche une colonne d'éléments flexibles

Exigences

  1. flexbox
  2. verticalement au milieu
  3. horizontalement à gauche
  4. éléments enfants empilés verticalement
  5. le nombre d'éléments enfants peut être un ou plusieurs
  6. utiliser l'ancienne syntaxe pour que Android 4.2 comprenne

Cela semble difficile à décrire. La boîte rose dans la démo est le look que je veux. La boîte verte est déjà bonne, mais je ne sais pas comment faire avec plusieurs éléments enfants.

Je pense que la solution peut être une combinaison des éléments suivants, mais je ne peux pas le faire.

align-items: center;
flex-direction: column;

body {
  margin: 1em .5em;
}
article {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

section {
  height: 18em;
  background: #ccc;
  margin: 0 .5em;
  position: relative;
  display: flex;
  align-items: center;
}
section:after {
  font-size: smaller;
  color: blue;
  position: absolute;
  bottom: 0;
}
section.big {
  width: 20%;
  height: 5em;
}
section.small {
  width: 10%;
  flex: 1;
}
section div {
  outline: 1px dotted green;
}
section.want {
  background-color: pink;
}
section.want:after {
  content: "1) want to do like this: vertically middle, horizontally left, while section will contain one or several child elements";
}
section.only1 {
  background-color: lightgreen;
}
section.only1:after {
  content: "2) all good except one point:the number of child element must be one.";
}
section.row:after {
  content: "3) by default flex-diraction is row";
}
section.col {
  flex-direction: column;
}
section.col:after {
  content: "4) this can vertically stack multiple stacks, but they no longer horizontally left-align";
}
section.col.justify {
  justify-content: center;
  align-items: flex-start;
  background-color: lightblue;
}
section.col.justify:after {
  content: "6) this is good!  Solved.";
}
section.colmar {
  flex-direction: column;
}
section.colmar:after {
  content: "5) this can vertically stack multiple stacks, and left-align divs, but divs are not vertically center";
}
section.colmar div {
  margin-right: auto;
}
<article>
  <section class="small want">
    line1
    <br/>line2
  </section>
  <section class="small only1">
    <div>only 1 div</div>
  </section>
  <section class="small row">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small col">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small colmar">
    <div>div1</div>
    <div>div2</div>
  </section>
  <section class="small col justify">
    <div>div1</div>
    <div>div2</div>
  </section>
</article>

démo codepen

htmlcsscss3flexbox
19
Ka Fai Lo

justify-content aligne les éléments flexibles le long de l'axe principal.

align-items aligne les éléments flexibles le long de l'axe transversal, qui est toujours perpendiculaire à l'axe principal.

En fonction de la flex-direction , l'axe principal peut être horizontal ou vertical.

Puisque flex-direction:column signifie que l'axe principal est vertical, vous devez utiliser justify-content ne pas align-items pour centrer les éléments flexibles.

Voici un exemple:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  background-color: lightpink;
}
<div id="container">
  <div class="box">div 1</div>
  <div class="box">div 2</div>
  <div class="box">div 3</div>
  <div class="box">div 4</div>
  <div class="box">div 5</div>
</div>

En savoir plus sur l'alignement flexible le long de l'axe principal ici:

En savoir plus sur l'alignement flexible le long de axe transversal ici:

48
Michael_B