Lisää
Flexbox: keskitä vaaka- ja pystysuunnassa
Kuinka keskittää div vaaka- ja pystysuunnassa säiliön sisällä flexboxin avulla. Alla olevassa esimerkissä haluan jokaisen numeron olevan toistensa alapuolella (riveissä), jotka on keskitetty vaakasuunnassa.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
579
3
Luulen, että haluat jotain seuraavan kaltaista.
Katso demo osoitteessa: http://jsfiddle.net/audetwebdesign/tFscL/
.flex-item
-elementtisi tulisi olla lohkotasoisia (div
eikäspan
), jos haluat korkeuden ja ylä-/alatäytteen toimivan oikein.Aseta myös
.row
-elementin leveydeksiauto
eikä100%
..flex-container
-ominaisuutesi ovat kunnossa.Jos haluat, että
.row
on keskitetty pystysuoraan näkymässä, määritä 100 % korkeushtml
:lle jabody
:lle ja nollaa myösbody
:n marginaalit.Huomaa, että
.flex-container
tarvitsee korkeuden, jotta pystysuuntainen kohdistus näkyy, muuten kontti laskee sisällön vähimmäiskorkeuden, joka on tässä esimerkissä pienempi kuin näkymäportin korkeus.Alaviite: Ominaisuudet
flex-flow
,flex-direction
jaflex-wrap
olisivat voineet helpottaa tämän suunnittelun toteuttamista. Mielestäni.row
-säiliötä ei tarvita, ellei elementtien ympärille haluta lisätä muotoilua (taustakuva, kehykset ja niin edelleen).Hyödyllinen resurssi on: http://demo.agektmr.com/flexbox/
Elementtien keskittäminen pystysuoraan ja vaakasuoraan Flexboxissa
Alla on kaksi yleistä keskitysratkaisua.
Toinen pystysuoraan kohdistetuille flexbox-elementeille (
flex-direction: column
) ja toinen vaakasuoraan kohdistetuille flexbox-elementeille (flex-direction: row
).Molemmissa tapauksissa keskitettyjen divien korkeus voi olla muuttuva, määrittelemätön, tuntematon, mikä tahansa. Keskitettyjen divien korkeudella ei ole väliä.
Tässä on HTML molemmille:
CSS (pois lukien koristeelliset tyylit)
Kun flex-elementit on pinottu pystysuoraan:
2
[DEMO](http://jsfiddle.net/8o29y7pd/)
Kun joustokohteet on pinottu vaakasuoraan:
Säädä
flex-direction
-sääntöä yllä olevasta koodista.3
[DEMO](http://jsfiddle.net/8o29y7pd/3/)
Joustokohteiden sisällön keskittäminen
[flex-muotoilukontekstin] (https://www.w3.org/TR/css-flexbox-1/#flex-containers) laajuus rajoittuu vanhempi-lapsi-suhteeseen. Flex-säiliön jälkeläiset lasten ulkopuolella eivät osallistu flex-asetteluun ja sivuuttavat flex-ominaisuudet. Pohjimmiltaan flex-ominaisuudet eivät ole periytyviä lasten ulkopuolelle.
Näin ollen sinun on aina sovellettava
display: flex
- taidisplay: inline-flex
-ominaisuutta vanhempaan elementtiin, jotta voit soveltaa flex-ominaisuuksia lapseen.Jos haluat keskittää tekstin tai muun flex-elementin sisältämän sisällön pysty- ja/tai vaakasuunnassa, tee elementistä (sisäkkäinen) flex-säiliö ja toista keskittämissäännöt.
Lisätietoja täältä: https://stackoverflow.com/q/25311541/3597276
Vaihtoehtoisesti voit soveltaa
margin: auto
joustokohteen sisältöelementtiin.Lue lisää flexin
auto
-marginaaleista täältä: Methods for Aligning Flex Items (katso laatikko #56).Useiden rivien flex-elementtien keskittäminen
Kun flex-säiliössä on useita rivejä (kietoutumisen vuoksi),
align-content
-ominaisuus on tarpeen poikittaisakselin suuntausta varten.Spesifikaatiosta:
Lisätietoja täällä: https://stackoverflow.com/q/42613359/3597276
Selaintuki
Flexboxia tukevat kaikki tärkeimmät selaimet, paitsi IE < 10. Jotkin viimeisimmät selainversiot, kuten Safari 8 ja IE10, vaativat valmistajan etuliitteen. Nopea tapa lisätä etuliitteitä on käyttää Autoprefixer. Lisätietoja tässä vastauksessa.
Keskitysratkaisu vanhemmille selaimille
Vaihtoehtoinen keskitysratkaisu CSS-taulukkoa ja asemointiominaisuuksia käyttäen on tässä vastauksessa: https://stackoverflow.com/a/31977476/3597276.
Älä unohda käyttää tärkeitä selainkohtaisia attribuutteja:
-->
justify-content: center; -->
Voit lukea nämä kaksi linkkiä ymmärtämään paremmin flex: http://css-tricks.com/almanac/properties/j/justify-content/ ja http://ptb2.me/flexbox/
Onnea.