Milligram: Demande de fonctionnalité : assistant d'alignement vertical

Créé le 7 nov. 2016  ·  4Commentaires  ·  Source: milligram/milligram

Depuis le système de grille de milligram basé sur des boîtes flexibles, est-il difficile d'implémenter des classes utilitaires pour aligner certaines choses verticalement ? S'il vous plaît, il est 2k16 !

help wanted

Commentaire le plus utile

Pour s'aligner verticalement, flexbox doit avoir height: 100%; sur l'élément parent. Dans ce cas, vous devez définir pour html , body , .container et .row

html,
body,
.container,
.row {
  height: 100%;
}

Ensuite, le .row-center fonctionne.

Tous les 4 commentaires

Salut @neronmoon
Tu as raison, c'est 2016 ! Milligram utilise flexbox dans le système de grilles. Pour l'alignement vertical, utilisez ces classes :
.row-top , .row-bottom , .row-center , .row-stretch , .row-baseline .

Faites-moi savoir si vous avez encore des doutes sur l'alignement vertical.

Hey @neronmoon Pour l'instant, je vais fermer ce numéro. N'hésitez pas à rouvrir si cela ne vous convient pas.

@cjpatoilo quelle est la manière recommandée de les utiliser ?

J'ai essayé de l'utiliser sur votre exemple de grille, comme indiqué ci-dessous, mais rien de centré.

<div class="row row-center">
  <div class="column column-10">
    <span class="column-demo">10%</span>
  </div>
</div>

Sur une note connexe, avez-vous une méthode recommandée pour centrer la seule chose d'affilée ?

<div class="row">
  <button>Some Button Text</button>
</div>

Pour cela, j'ai utilisé margin: 0 auto . Mais le seul problème est que les lignes ont une marge négative, ce qui signifie que tout est à gauche.

Pour s'aligner verticalement, flexbox doit avoir height: 100%; sur l'élément parent. Dans ce cas, vous devez définir pour html , body , .container et .row

html,
body,
.container,
.row {
  height: 100%;
}

Ensuite, le .row-center fonctionne.

Cette page vous a été utile?
0 / 5 - 0 notes