web-dev-qa-db-fra.com

La colonne Flexbox s'aligne sur le bas

J'essaie d'utiliser Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ / indique les options d'alignement de Nice; mais je voudrais réellement une situation de haut en haut en bas.

Je veux qu'une div reste au bas de la div parente en utilisant flexbox. Je peux le faire avec flex-direction: column et align-content: Space-between, mais la division centrale s'alignera au centre, je veux que celle du milieu soit également collée au sommet.

[Haut]

[milieu]

-

-

-

[bas]

align-self: flex-end le fera flotter à droite, pas en bas.

documents flexbox complets: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

csscss3flexbox
41
Laurens Kling

Fondamentalement, la solution consiste à donner au dernier des éléments centraux un code de croissance flexible de la manière suivante:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Merci, T04435.

18
T04435

Je suis un peu en retard pour la fête, mais cela pourrait être pertinent pour ceux qui essaient d'accomplir la même chose que vous devriez pouvoir faire:

margin-top: auto

sur l'élément en question et il devrait aller au fond. Devrait faire l'affaire pour Firefox, Chrome et Safari.

90
Torbjørn Angeltveit

J'ai trouvé ma propre solution, je vais l'ajouter ici pour la valeur de la documentation;

Si vous donnez le bloc central height: 100%, il occupera toute la pièce du milieu. Ainsi, le bloc inférieur sera au bas et le haut et le milieu sont en haut.

UPDATE: Cela ne fonctionne pas pour Chrome ...

UPDATE: Nous avons trouvé un moyen qui fonctionne pour FF/Chrome: définir flex-grow sur un nombre plus élevé (1 suffit) pour [milieu] le fera passer en taille moyenne. plus d'infos: http://css-tricks.com/almanac/properties/f/flex-grow/

12
Laurens Kling

La propriété align self repose sur l'alignement d'un élément par rapport à l'axe transversal et non à l'axe principal. Ce n’est donc pas la voie à suivre . Vous avez plusieurs options pour y parvenir avec flexbox, cependant:

1) Utilisez flex-grow: 1 sur votre article du milieu. Cela le fera grossir en prenant tout l’espace restant dans le conteneur, poussant ainsi votre dernière div au fond.

2) Refactorisez votre mise en page pour qu’il y ait une div principale avec justify-content:space-between afin que votre dernière div soit collée au bas:

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

3) C’est un peu bizarre, mais vous pouvez même le faire en utilisant align-self mais en inversant le sens de flexion et en permettant aux éléments d’emballer:

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

J'ai testé tout cela avec ce concepteur gratuit de flexbox: http://algid.com/Flex-Designer

3
Mario Vázquez

Considérant que votre site Web a une structure de base, voici une solution que j'ai utilisée et appliquée dans une situation similaire, avec seulement quelques lignes de code:

HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}
0
Jorge Monte

Je sais que c'est un vieux billet, mais le même problème, avec l'alignement sur un seul axe de Flexbox, m'a rendu fou pendant une heure.

La marge automatique est une astuce intéressante, mais je voulais partager ma solution avec CSS Grid.

La partie important est la définition de grid-template-rows . Avec auto, les lignes ont la même hauteur que le contenu et 1fr utilise l'espace restant. pour la rangée du milieu.

Voici un bon aperçu de CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  justify-content: center;
}

.top {
  height: 2em;
  width: 10em;
  background-color: blue;
}

.middle {
  height: 3em;
  width: 10em;
  background-color: green;
}

.bottom {
  height: 2em;
  width: 10em;
  background-color: red;
}
<div class="container">
  <div class="top">
    <p>TOP</p>
  </div>
  <div class="middle">
    <p>MIDDLE</p>
  </div>
  <div class="bottom">
    <p>BOTTOM</p>
  </div>
</div>

0
Sebe