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 !
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.
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 pourhtml
,body
,.container
et.row
Ensuite, le
.row-center
fonctionne.