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>
Luulen, että haluat jotain seuraavan kaltaista.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
Katso demo osoitteessa:
.flex-item
-elementtisi tulisi olla lohkotasoisia (div
eikä span
), jos haluat korkeuden ja ylä-/alatäytteen toimivan oikein.
Aseta myös .row
-elementin leveydeksi auto
eikä 100%
.
.flex-container
-ominaisuutesi ovat kunnossa.
Jos haluat, että .row
on keskitetty pystysuoraan näkymässä, määritä 100 % korkeus html
:lle ja body
:lle ja nollaa myös body
: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
ja flex-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/
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:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (pois lukien koristeelliset tyylit)
Kun flex-elementit on pinottu pystysuoraan:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
[DEMO](
)Kun joustokohteet on pinottu vaakasuoraan:
Säädä flex-direction
-sääntöä yllä olevasta koodista.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
[DEMO](
3/)[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
- tai display: 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.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Lisätietoja täältä: https://stackoverflow.com/q/25311541/3597276
Vaihtoehtoisesti voit soveltaa margin: auto
joustokohteen sisältöelementtiin.
p { margin: auto; }
Lue lisää flexin auto
-marginaaleista täältä: Methods for Aligning Flex Items (katso laatikko #56).
Kun flex-säiliössä on useita rivejä (kietoutumisen vuoksi), align-content
-ominaisuus on tarpeen poikittaisakselin suuntausta varten.
Spesifikaatiosta:
8.4. Flex-rivien pakkaaminen:
align-content
-ominaisuus. -ominaisuusOminaisuus
align-content
kohdistaa flex-säiliön rivit sisällä flex-säiliön sisällä, kun poikkiakselilla on ylimääräistä tilaa, samalla tavalla kuin mitenjustify-content
kohdistaa yksittäiset elementit pääakselilla. Huomaa, että tällä ominaisuudella ei ole vaikutusta yksiriviseen joustosäiliöön.
Lisätietoja täällä: https://stackoverflow.com/q/42613359/3597276
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.
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:
-->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center; -->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
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.