Flexbox: yatay ve dikey olarak ortalayın

Sanırım aşağıdaki gibi bir şey istiyorsunuz.

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>

Demoyu görmek için: http://jsfiddle.net/audetwebdesign/tFscL/

Yükseklik ve üst/alt dolgunun düzgün çalışmasını istiyorsanız .flex-item öğeleriniz blok düzeyinde (span yerine div) olmalıdır.

Ayrıca, .row üzerinde, genişliği 100% yerine auto olarak ayarlayın.

.flex-container` özelliklerinizde sorun yok.

.rowun görünüm portunda dikey olarak ortalanmasını istiyorsanız,htmlvebodyiçin %100 yükseklik atayın ve ayrıcabody` kenar boşluklarını sıfırlayın.

Dikey hizalama etkisini görmek için .flex-containerın bir yüksekliğe ihtiyacı olduğunu unutmayın, aksi takdirde konteyner içeriği içine almak için gereken minimum yüksekliği hesaplar, bu da bu örnekte görünüm portu yüksekliğinden daha azdır.

Dipnot: flex-flow,flex-direction,flex-wrapözellikleri bu tasarımın uygulanmasını kolaylaştırabilirdi. Bence.row` konteynırına, elemanların etrafına bazı şekillendirmeler (arka plan resmi, kenarlıklar vb.) eklemek istemediğiniz sürece ihtiyaç yoktur.

Yararlı bir kaynak: http://demo.agektmr.com/flexbox/

Flexbox'ta Öğeler Dikey ve Yatay Olarak Nasıl Ortalanır?

Aşağıda iki genel merkezleme çözümü bulunmaktadır.

Biri dikey olarak hizalanmış esnek öğeler için (flex-direction: column) ve diğeri yatay olarak hizalanmış esnek öğeler için (flex-direction: row).

Her iki durumda da ortalanmış divlerin yüksekliği değişken, tanımsız, bilinmeyen, her neyse olabilir. Ortalanmış divlerin yüksekliği önemli değildir.

İşte her ikisi için de HTML:

<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 (dekoratif stiller hariç)

Esnek öğeler dikey olarak istiflendiğinde:

#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](http://jsfiddle.net/8o29y7pd/)

Esnek öğeler yatay olarak istiflendiğinde:

Yukarıdaki koddan flex-direction kuralını ayarlayın.

#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](http://jsfiddle.net/8o29y7pd/3/)

Esnek öğelerin içeriğini ortalamak

Esnek biçimlendirme bağlamının*](https://www.w3.org/TR/css-flexbox-1/#flex-containers) kapsamı, ebeveyn-çocuk ilişkisiyle sınırlıdır. Bir flex konteynerinin alt öğelerinin ötesindeki torunları flex düzenine katılmaz ve flex özelliklerini yok sayar. Esasen, flex özellikleri alt öğelerin ötesinde miras alınamaz.

Bu nedenle, flex özelliklerini çocuğa uygulamak için her zaman bir üst öğeye display: flex veya display: inline-flex uygulamanız gerekecektir.

Bir flex öğesinde bulunan metni veya diğer içeriği dikey ve/veya yatay olarak ortalamak için, öğeyi (iç içe) bir flex konteyner haline getirin ve merkezleme kurallarını tekrarlayın.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Daha fazla ayrıntı için: https://stackoverflow.com/q/25311541/3597276

Alternatif olarak, esnek öğenin içerik öğesine margin: auto uygulayabilirsiniz.

p { margin: auto; }

Flex auto marjları hakkında buradan bilgi edinin: Flex Öğelerini Hizalama Yöntemleri (bkz. kutu#56).

Birden fazla esnek öğe satırını ortalamak

Bir flex konteyner birden fazla satıra sahip olduğunda (sarma nedeniyle) align-content özelliği çapraz eksen hizalaması için gerekli olacaktır.

Spesifikasyondan:

8.4. Esnek Satırları Paketleme: align-content özellik

align-content özelliği bir flex konteynerin satırlarını çapraz eksende fazladan boşluk olduğunda flex konteyner, benzer şekilde justify-content öğelerinin ana eksen içinde nasıl hizalandığını gösterir. Not, bu özelliğin tek satırlı flex konteyner üzerinde bir etkisi yoktur.

Daha fazla ayrıntı için: https://stackoverflow.com/q/42613359/3597276

Tarayıcı desteği

Flexbox, [IE < 10 hariç] tüm büyük tarayıcılar tarafından desteklenmektedir (http://caniuse.com/#search=flex). Safari 8 ve IE10 gibi bazı yeni tarayıcı sürümleri [satıcı önekleri] gerektirir(https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix). Önekleri eklemenin hızlı bir yolu için Autoprefixer kullanın. Daha fazla ayrıntı bu yanıt.

Eski tarayıcılar için merkezleme çözümü

CSS tablo ve konumlandırma özelliklerini kullanan alternatif bir merkezleme çözümü için şu yanıta bakın: https://stackoverflow.com/a/31977476/3597276

Önemli tarayıcılara özgü nitelikleri kullanmayı unutmayın:

align-items: center; -->

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

Flex'i daha iyi anlamak için bu iki bağlantıyı okuyabilirsiniz: http://css-tricks.com/almanac/properties/j/justify-content/ ve http://ptb2.me/flexbox/

İyi şanslar.