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>

http://codepen.io/anon/pen/zLxBo

Ratkaisu

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: 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 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/

Kommentit (8)

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:

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <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 */
}

2

[DEMO](http://jsfiddle.net/8o29y7pd/)


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;
}

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- 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).


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:

8.4. Flex-rivien pakkaaminen: align-content-ominaisuus. -ominaisuus

Ominaisuus 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 miten justify-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


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.

Kommentit (5)

Ä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.

Kommentit (6)