FlexBox öğelerini konumlandırma yöntemi. Flex Konteyner Kullanarak CSS Kullanarak Blokları Hizalama Pratik Kullanım FlexBox

Flexbox'ın hızlı bir şekilde yakalanması nedenlerinden biri, web geliştiricilerin ilgisini çekmesi, web'e ilk defa uygun hizalama yetenekleri getirmesidir. Uygun dikey hizalamayı etkinleştirdi, bu yüzden son bir kutuyu kolayca ortadan kaldırabiliriz. Bu kılavuzda, uyum ve gerekçe özelliklerinin FlexBox'da nasıl çalıştığına tam bir bakış atacağız.

Kutumuzu ortadan kaldırmak için, bu durumda dikey olarak çalışan blok ekseni olan eşyalarımızı hizalamak için ALIGN-öğe özelliğini kullanıyoruz. Maddeyi ana eksen üzerindeki hizalamak için Gaupify İçeriği kullanıyoruz; bu durumda, bu durumda satır iç eksen yatay olarak çalışıyor.

Aşağıdaki bu örneğin koduna bir göz atabilirsiniz. Konteynerin boyutunu veya iç içe geçmiş elemanın boyutunu değiştirin ve iç içe geçmiş eleman her zaman ortalanmış kalır.

Hizalamayı kontrol eden özellikler

Bu kılavuzda bakacağımız özellikler aşağıdaki gibidir.

GÜZELDİ-İÇERİK - Ana eksendeki tüm öğelerin hizalamasını kontrol eder.
Hizalama-Öğeler - Çapraz eksendeki tüm öğelerin hizalamasını kontrol eder.
Hizala-Kendini kontrol eder - Haç ekseninde bireysel bir esnek öğenin hizalamasını kontrol eder.
Hizalama içeriği - "Paketleme Flex Lines" için olduğu gibi açıklanmıştır; Çapraz eksendeki esnek çizgiler arasındaki boşluğu kontrol eder.

Ayrıca, otomatik marjların FlexBox'ta uyum için nasıl kullanılabileceğini de keşfedeceğiz.

Not.: FlexBox'taki hizalama özellikleri kendi şartnamelerine yerleştirilmiştir - CSS kutusu hizalama seviyesi 3. Bu spec'in nihayetinde FlexBox Seviyesi'nde tanımlandığı gibi özellikleri yerine getirmesi bekleniyor.

Çapraz eksen.

Hizalamalar ve Hizala-Kendi Kendini Özellikleri Flex yönü sıra ise ve esnek yönü sütun olması durumunda, flex yönü satır ve satır boyunca eğer flex yönü ise, çapraz eksendeki flex öğelerinizin hizalamasını kontrol edin.

En basit esnek örnekte çapraz eksen hizalamasını kullanıyoruz. Ekran eklersek: bir kaba esneklik, çocuk öğelerinin hepsi üst üste düzenlenmiş esnek öğeler olur. Hepsi en uzun madde kadar uzun olacaklar, çünkü bu madde çapraz eksendeki öğelerin yüksekliğini tanımlıyor. Flex kabınız yüksek bir yükseklik seti varsa, öğeler üründe ne kadar içeriğin olduğuna bakılmaksızın, bu yüksekliğe uzanır.

Öğeler aynı yükseklik haline gelir, hizalamaların başlangıç \u200b\u200bdeğerinin, çapraz eksendeki hizalamayı kontrol eden özelliğin, gerilmeye ayarlanmış olmasıdır.

Eşyaların nasıl hizalandığını kontrol etmek için diğer değerleri kullanabiliriz:

hizalamalar: Flex-start
hizalamalar: Flex-end
hizala-Öğeler: Merkez
hizala-Öğeler: Streç
hizala-Öğeler: Temel

Aşağıdaki canlı örnekte, hizalı eşyaların değeri uzanır. Diğer değerleri deneyin ve eşyaların tümünün esnek kabın içinde birbirlerine karşı nasıl hizalandığını görün.

Bir öğeyi hizala-benlik ile hizalamak

Hizalama-Öğeler özelliği, tüm esnek öğelerindeki hizalama-kendi kendine özellikleri grup olarak ayarlar. Bu, tek bir öğeyi hedeflemek için hizalama-kendi kendine mülkü açıkça beyan edebileceğiniz anlamına gelir. Hizala-kendi kendine mülk, aynı değerlerin hepsini hizalı eşyalar artı, esnek kapta tanımlanan değeri sıfırlayacak olan bir Otomatik Değer olarak kabul eder.

Bu bir sonraki canlı örnekte, Flex ContainCer hizalı eşyalara sahiptir: Flex-start, bu, öğelerin Hepsi çapraz eksenin başlangıcına hizalandığı anlamına gelir. Birinci çocuk seçicisi kullanarak ilk öğeyi hedef aldım ve bu öğeyi hizalayacak şekilde ayarladım. Başka bir öğe, seçilen ve verilen Hizalama Sınıfı sınıfı kullanılarak seçildi. Hizalama öğelerinin değerini değiştirebilir veya bunun nasıl çalıştığını görmek için bireysel eşyalardaki hizalama değerlerini değiştirebilirsiniz.

Ana ekseni değiştirme

Şimdiye kadar, esnek yönümüz sıra olduğunda ve üstten aşağıya yazılan bir dilde çalışırken davranışlara baktık. Bu, ana eksenin yatay olarak satır boyunca çalıştığı anlamına gelir ve haç ekseni hizalamamız, öğeleri yukarı ve aşağı hareket ettirir.

Flex-yönümüzü sütun için değiştirirsek, hizala-öğeler ve hizala öz maddeleri sola ve sağa hizalayacaktır.

Bunu, Flex-Direction'a sahip bir esnek kabı olan aşağıdaki örnekte deneyebilirsiniz: sütun henüz aksi takdirde önceki örneğe göre tam olarak aynıdır.

İçeriği Haç Ekseninde Hizalama - Hizalama İçeriği Mülkiyet

Şimdiye kadar öğeleri hizalıyoruz ya da esnek konteyner tarafından tanımlanan alanın içindeki bireysel bir öğeyi hizaladık. Sarılmış bir çok satırlı esnek kabınız varsa, aynı zamanda satırlar arasındaki boşluk dağılımını da kontrol etmek isteyebilirsiniz. Spesifikasyonda bu, ambalaj esnek çizgileri olarak tanımlanır.

Hizalama içeriği çalışması için, Flex kabınız içindeki daha fazla yüksekliğe ihtiyaç duyarız. Set olarak öğeler ve bu boş alanla olanları ve içindeki tüm eşya kümesinin hizalamasını belirler.

Hizalama içerik özelliği aşağıdaki değerleri alır:

hizalama içeriği: Flex-start
hizalama içeriği: Flex-end
hizalama İçeriği: Merkez
hizalama İçeriği: Uzay arası
hizalama İçeriği: Uzay-Etrafında
hizala-İçerik: Streç
hizalama içeriği: uzay-eşit şekilde (FlexBox spesifikasyonunda tanımlanmadı)

Aşağıdaki canlı örnekte, esnek kabın, eşyalarımızı görüntülemek için gerekenden daha fazlası olan 400 piksel yüksekliğe sahiptir. Hizalama içeriğinin değeri boşluktur, bu da mevcut alanın paylaşıldığı anlamına gelir. arasında. Çapraz eksendeki kabın başlangıcı ve ucu ile yerleştirilen esnek çizgiler.

Hizalama içerik özelliklerinin nasıl çalıştığını görmek için diğer değerleri deneyin.

Bir kez daha bu mülkün sütunla çalışırken nasıl davrandığını görmek için esnek yönümüzü sütuna geçebiliriz. Daha önce olduğu gibi, tüm ITM'leri görüntüledikten sonra çapraz eksende yeterince boşluğa ihtiyacımız var.

Not.: Değer alanı - eşit olarak FlexBox spesifikasyonunda tanımlanmaz ve daha sonra kutu hizalama özelliklerine ek olarak eklenir. Bu değer için tarayıcı desteği, FlexBox Spec'te tanımlanan değerlerin bu kadar iyi değildir.

CSS3-FlexBox. - Bu, cascade stillerinin son sürümünde tanıtılan özel bir teknolojidir; bu, blokların konumunun esnek ağını bir ebeveynli kabın içinde ayarlamanıza izin verir.

Bu örgü verilen özellikler:

ana HTML-Clash Frame'nin sütun yapısını kontrol etme yeteneği;
bir tablo düzeni gibi HTML etiketlerinin düzenlenmesinin yönünü yönetin;
kontrol sırası;
ve bircok digerleri.

CSS-FlexBox teknolojisinin kendisi, aşağıdaki şemaya göre göreceli mahallede ve dikey eksenlerde temel bloklarda duruyor:

Navigasyon

Blokların dikkate alınan özelliğini standart olarak ve özel projeler kullanan web tarayıcılarının bir listesini veriyoruz:

Yani: 11.0, 10.0 ms-
Firefox: 28.0, 18.0 -MOZ-
Krom: 29.0, 21.0 -Webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -Webkit
Safari (haşhaşın altında): 7.0 -WebKit-
Opera Mini: 8
Anroyd Tarayıcı: 4.4, 4.1 -WebKit-
Krom (Android altında): 44

1.1. Ekran özelliği: Flex

CSS kuralı, bazı ana kabın içinde bulunan HTML etiketlerinin bağlı ortaklıklarından yapılmış bir FlexBox-ızgara oluşturmayı amaçlamaktadır. Bu ızgarayı belirtmek için, ekran kuralını değere ayarlamanız gerekir:

ekran: Flex; - Blok Ekranı için;
ekran: Inline-Flex; - Satır içi ekran için.

Tarayıcıların bazı sürümlerinin, özel projeleri kullanarak bu kuralı reçete etmek için gerekli olduğu belirtilmelidir (yukarıdaki paragrafa bakınız), yanı sıra bir ebeveynde sarmalayıcı olmadan yatan HTML etiketlerinin isimsiz olduğu düşünülmesidir:

1.2. Yatay olarak hakikat içeriği hizalayın

Kural, üst flexbox kabının içindeki yatay olarak bağlı ortaklıkları hizalamak için kullanılır. Bu kural miras alınmadı.

hakikat içeriği
Değerler:
Flex-start.	Sol kenardaki çizgiler. Varsayılan değer
Esnek uç.	Sağ kenardaki çizgiler.
Merkez	Ortadaki çizgiler.
Arasındaki boşluk.	Ebeveynin tüm genişliğinde denge segmentinde. İlk elemanın boşluğa sahip olmadığı, ancak dolguyu ve sonuncusu da sağ kenarda dikkate alındığını belirtmekte fayda var. Diğer tüm blok elemanları, birinci ile sonuncusu arasında aynı boşluk bölümleri arasında yerleştirilir.
Boşluk.	Her iki blok arasında her iki blok arasında aynı girinti olacak ve kenarın yarısı olacaktır.
ilk	Varsayılan değeri ayarlama.
kalıtım.

Kayıt formatı

B-Podlogka (Yükseklik: 120px; Arka Plan-Renkli: #DDD; Marjı: 0px; Dolgu: 10px; Ekran: Flex; Ekran: -Webkit-Flex; Justify-Content: Flex-Start; -Webkit-Justify-Content; Flex -Başlat;)

B-Podlogka (Guelify-Content: Flex-end;)

B-Podlogka (Justify-Content: Center;)

B-Podlogka (hakikat içeriği: uzay arası;)

B-Podlogka (içeriği haklı çıkarın: boşluk);)

1.3. Dikey Hizalama-Öğeler Hizalama

Özellik, ana flexbox kabının içindeki dikey olarak çocuk nesnelerini hizalamak için kullanılır. Anonim esnek eşyaların da bu hizalamanın altında düştüğü belirtilmelidir. Bu kural miras alınmadı. Sadece ilk iplik blokları hizalanır.

hizalı eşyalar.
Değerler:
Uzatmak.	FlexBox Blokları, sabit değilse, yükseklik, ana kabın tüm yüksekliğine çekilir. İlk (temel) parametredir.
Flex-start.	Dahili girintileri (dolgu) dikkate alınarak, ana kabın üst kenarı boyunca flexbox-eşyaların üst kenarı boyunca hizalanması amaçlanmıştır.
Esnek uç.	Flexbox-eşyaların, iç girintileri (dolgu) dikkate alarak ana kapların alt kenarı boyunca hizalamak için tasarlanmıştır.
Merkez	Çocuk esnek bloklarını, bir esnek kabın içine en yüksek bloğun orta çizgisinde hizaladılar.
Taban çizgisi	Ebeveynin içindeki alt esnek blokları bu bloklardaki metnin orta çizgisine göre hizaladı.
ilk
kalıtım.	CSS tercümanının, değerin ana etiketten alınması gerektiği mesajı için tasarlanmıştır.

Kayıt formatı

B-Podlogka (Hizalı eşyalar: Streç; -Webkit-Hizansa-Öğeler: Streç;)

Çocuğun flex bloklarının kabın tüm yüksekliğine gerildiği, bunların sabit bir yüksekliğine sahip olmadıkları için gerekli olduğu belirtilmelidir: Yükseklik: Otomatik; .

B-Podlogka (Hizalamalar: Flex-start;)

B-Podlogka (hizalı eşyalar: Flex-end;)

B-Podlogka (hizalı eşyalar: Merkez;)

B-podlogka (hizalı eşyalar: taban çizgisi;)

1.4. Ana eksen esnek yönünün oryantasyonu

Aşağıdaki flex bloklarının oryantasyonunu (oryantasyonunu) belirtmek için kullanılır. Yerleşik standartlara uygun olarak, oryantasyon iki tip olabilir: dikey olarak (varsayılan olarak, sütunda?) Ve yatay olarak (varsayılan olarak, varsayılan olarak).).

Kayıt formatı

B-Podlogka (Flex-Direction: Sıra; -WebKit-Flex-Direction: Row;)

B-podlogka (esnek yön: satır-ters;)

B-Podlogka (Flex-Direction: Sütun;)

B-Podlogka (Flex-Direction: Sütun-ters;)

1.5. Birkaç satırda konaklama Flex-wrap

Çocuğun esnek bloklarının bir veya daha fazla satıra yerleştirilmesinden sorumludur.

flex-wrap
Değerler:
Nowrap	İlk durumda, tüm alt öğeler bir satırda (veya? Seçilen metin yönüne bağlı olarak) bulunur.
Paketlemek.	Böyle bir parametre belirlerken, çocuk öğeleri ana genişliğe (veya? Seçilen metin yönüne bağlı olarak) bağlı olarak birkaç satır alacaktır.
Sarma-ters.	Böyle bir parametre belirlerken, bağlı ortaklıklar, ters bir alternatif siparişi verirken, ebeveynin genişliğine bağlı olarak birkaç satır işgal edecektir.
ilk	İlk değerde bulunur.
kalıtım.	CSS tercümanının, değerin ana etiketten alınması gerektiği mesajı için tasarlanmıştır.

Kayıt formatı

B-Podlogka (Flex-Wrap: Sarma; -Webkit-Flex-Wrap: Sarma;)

B-podlogka (Flex-wrap: Sarma-ters;)

1.6. Yönetmelilik ve çoklu akışlı bir kural esnek akışı

Bu kural, kodu optimize etmek için önceki iki kuralın daha kompakt bir kaydı olarak kullanılır.

Kayıt formatı

B-Podlogka (Flex-Flow: Satır Sarma; -WebKit-Flex-Flow: Satır Sarma;)

1.7. Tüm hizalı içerik çizgisinde dikey olarak hizalayın

Bu TSSS, dikey bir konteyner kızı flex bloklarını hizalamak için bir kuraldır. Bu kuralı tetiklemek için, ana kabın ayarlanması gerekir: yükseklik ve esnek akış. Kalıtsal değil.

hizalama içeriği
Değerler:
Uzatmak.	Elemanların ana kabın tüm yüksekliğine gerilmesi (esnek bloklar yükseklik kaydedilmemelidir).
Flex-start.	Üstteki çizgiler.
Esnek uç.	Aşağı bırakır.
Merkez	Merkezde dikey olarak çizgiler.
Arasındaki boşluk.	Düzeltme içi elemanları dikey olarak hizalar, ilk blokların yukarı doğru basıldığı şekilde, ikincisi bir kitaptır ve gerisi arasındaki boşluk eşit şekilde dağıtılır.
Boşluk.	Dikey olarak düz elemanları, başlangıçtaki mesafenin, sonunda ve aralarında birbirlerine eşit olduğu şekilde hizalar.
ilk	İlk değerde bulunur.
kalıtım.	CSS yorumlama seçeneği, hangi değeri ebeveyn etiketinden alınmalıdır.

Basit kod

B-Podlogka (Yükseklik: 120px; Flex-Flow: Satır Sarma; Hizalama İçeriği: Streç;)

B-Podlogka (hizalama içeriği: Flex-start;)

B-Podlogka (hizalama içeriği: Flex-end;)

B-Podlogka (Hizalama İçeriği: Merkez;)

B-Podlogka (hizalama içeriği: boşluk;)

Bir konteyner ebeveyni ile ilgili olarak kullanılan kurallara ek olarak, FlexBox Kılavuzu'ndaki kız elemanlarına uygulanan birkaç kural vardır. Onları daha ayrıntılı olarak düşünün.

2.1. Sipariş Blokları Sipariş

TSSS-Kuralı, Flex-ebeveynin içindeki bazı iştirak öğelerini düzenlemek için kullanılır. Bloğu ilk olarak ayarlamak için, 1'i belirtmek için gereklidir ve -1'in sonunda hareket ettirmek gerekir. Kalıtsal değil.

Kayıt formatı

B-DIV1 (-WebKIT-Sipariş: 1; Sipariş: 1;)

B-DIV5 (-Webkit-Sipariş: -1; Sipariş: -1;)

2.2. Flex-Temel Flex bazlı temeli

CSS Kuralı Ana kapsayıcının içindeki bir bağlı fleks bloğun genişliğini düzeltmek için tasarlanmıştır. Altta yatan parametrelerin altında iki kişiyi ayarlayın. Kalıtsal kural değil.

Basit kod

B-DIV3 (Flex-Temel: 70px; -Webkit-Flex-baz: 70px;)

Tüm bloklar elli piksel miktarında ve üçüncü - doksan piksel tutarında bir temel oluşturur.

Hizalama-Contents özelliği, serbest alan varlığında, flex konteynerinin içindeki satırların hizalamasının türünü belirler.

İçin geçerlidir: Flex konteyner.

Varsayılan değer: Uzatmak.

Flex-start satırları, enine eksenin başlangıcında bulunur. Her bir sonraki satır öncekiyle gider. Flex-end satırları, enine eksenin sonundan başlayarak bulunur. Her bir önceki satırın sonuna gider. Merkez satırları konteynerin merkezinde bulunur. Alanlar arasındaki satırlar kapsayıcıda eşit olarak dağıtılır ve aralarındaki mesafe eşittir. Boşluklu satırlar, iki bitişik satır arasındaki boşluk aynıdır. İlk dizenin önündeki boş alan ve son satırdan sonra, iki bitişik satır arasındaki boşluğun yarısına eşittir. Uzay-eşit derecede satırlar eşit olarak dağıtılır. İlk satırdan önce boş alan ve son satırdan sonra diğer satırlarla aynı genişliğe sahiptir. Streç dizeleri eşit şekilde gerilmiş, boş alanı doldurur.

Hizalama-Content Mülkiyet, bir flex konteynerinin hatları içindeki esnek konteynerin satırlarını, çapraz eksendeki esnek boşluk içindeki çizgilerindeki çizgileri hizaladı; Not, bu özelliğin tek satırlı bir esnek kabın üzerinde etkisi yoktur. Değerler aşağıdaki anlamlara sahiptir:

NOT: Yalnızca çok satırlı esnek kaplar, hatlar için hizalanacak hatlar için çapraz eksende boş bir alana sahip, çünkü tek satırlı bir esnek kabın içinde boşluğu boşluğu doldurmak için otomatik olarak uzanır.

İçin geçerlidir.: Flex kapları.

İlk: Uzatmak.

Flex-start çizgileri, esnek kabın başlangıcına doğru doldurulur. Flex kabındaki ilk çizginin çapraz başlangıç \u200b\u200bkenarı, esnek kabın çapraz çalıştırma kenarı ile aynı hizada yerleştirilir ve ardından her bir satır, önceki hat ile aynı hizada yerleştirilir. Flex-end çizgileri, esnek kabın ucuna doğru doldurulur. Esnek kabın geçitinin enine geçişi ve her basma hattı sonraki satırla aynı hizada yerleştirilir. Merkez çizgileri, esnek kabın ortasına doğru doldurulur. Esnek kabın içindeki çizgiler birbirleriyle aynı hizada yerleştirilir ve esnek kabın çapraz başlangıç \u200b\u200biçeriği kenarı ile Flex kabındaki yumruk çizgisi ile esnek kabın çapraz uç içeriği arasında flexin ortasına hizalanır. Flex konteynerindeki konteyner ve son satır. (Artık boş alan negatif ise, hatlar her iki yönde de eşit olarak taşacaktır.) Boşluk arası satırlar, esnek kabın içinde eşit şekilde dağılır. Artık boş alan negatifse, bu değer esnek başlangıç \u200b\u200bile aynıdır. Aksi takdirde, esnek kabın çapraz başlatma içeriği kenarının çapraz başlangıç \u200b\u200biçeriği kenarındaki ilk satırın çapraz başlangıç \u200b\u200bkenarı, esnek kabın içindeki son çizginin geçit kenarı, çapraz uçla aynı hizada yerleştirilir. Esnek kabın içerik kenarı ve flex kabındaki kalan çizgiler, herhangi bir iki bitişik çizginin arasındaki boşluk aynı olmasıdır. Boşluk etrafındaki çizgiler, esnek kapta eşit olarak dağıtılır, her iki ucunda da yarım boyutlu boşluklarla. Artık boş alan negatifse, bu değer merkez ile aynıdır. Aksi takdirde, esnek kabın içindeki çizgiler, iki bitişik çizginin arasındaki boşluğun aynı olması ve yumruk / son satırlar arasındaki boşluk ve esnek kabın kenarları arasındaki boşluk, esnek çizgiler arasındaki boşluğun yarısıdır. Boşluk-eşit olarak çizgiler, esnek kabın içinde eşit olarak dağıtılır. Artık boş alan negatifse, bu değer merkez ile aynıdır. Aksi takdirde, esnek kabın içindeki çizgiler, her esnek çizgisi arasındaki boşluğun aynı olacak şekilde dağıtılır. Streç çizgiler kalan alanı almak için uzanır. Artık boşluk negatifse, bu değer esnek başlangıç \u200b\u200bile aynıdır. Aksi takdirde, boş alan, çapraz boyutlarını artırarak tüm çizgiler arasında eşit olarak ayrılır.

CSS FlexBox Nasıl Çalışır: Web sayfasındaki Düzen Düzen Sistemine Görsel Giriş

FlexBox bizi, saf CSS'nin hoş olmayan anlarından (örneğin, dikey hizalamadan) kurtarmak için tasarlanmıştır ve göreviyle mükemmel bir şekilde başa çıkar. Ancak bazen eserinin ilkelerini bazen, özellikle de yeniyseniz anlamak bazen zordur.

FlexBox'un ana görevi, katmanları esnek hale getirmek ve onlarla çalışmak sezgiseldir. Bu hedefe ulaşmak için, kapların, aralarındaki boyutlarını ve mesafelerini değiştirmek de dahil olmak üzere bağlı ortaklıkları ile nasıl başa çıkılacağına karar vermelerini sağlar.

İyi geliyor, ancak pratikte pürüzsüz olup olmadığını görelim. Bu makalede FlexBox'un en popüler 9 özelliğini inceleyeceğiz, yaptıkları şeyle ilgileneceğiz ve gerçekte nasıl çalıştıklarını.

Ekran: Flex

İşte bir sayfanın örneği:

Gri Div içinde bulunan 4 çok renkli div var. Her DIV ekranı vardır: Blok özelliği. Bu nedenle, her kare çizginin tüm genişliğini alır.

FlexBox ile çalışmaya başlamak için, konteyner flex-konteynerimizi yapmamız gerekiyor. Bu böyle yapılır:

#Container (Ekran: Flex;)

Özellikle değişmemiş bir şey gibi görünüyor - Divs yeni bir üste girdi. Ama gerçekten güçlü bir şey yaptın. Square'lerinizi "Flex-Context" adlı harika bir özellik verdiniz.

Esnek yön.

Esnek kabın iki eksenine sahiptir: ana eksen ve dikey.

Varsayılan olarak, tüm öğeler ana eksen boyunca bulunur: soldan sağa. Bu nedenle, ekranı uyguladığımızda karelerimiz bir çizgiye katlanır: Flex. Ancak, esnek yönü ana ekseni döndürmenizi sağlar.

#Container (Ekran: Flex; Flex-Direction: Sütun;)

Flex-yönün: Sütun, ana olana dik eksen boyunca kareler düzlemez önemlidir. Ana eksenin kendisi konumunu değiştirir ve şimdi yukarıdan aşağıya doğru yönlendirilir.

Flex-yön için birkaç özellik de vardır: satır-ters ve sütun gerisi.

İçeriği haklı çıkarmak

İçeriği, ana eksenin üzerindeki elemanların hizalanmasından sorumludur.

Flex yönüne dönelim: satır.

#Container (Ekran: Flex; Flex-Direction: Sıra; Güçlü İçerik: Flex-Start;)

İçeriği 5 değer alabilir:

esnek başlangıç;
flex-end;
merkez;
aRASINDAKİ BOŞLUK;
boşluk.

Uzay arası kareler arasındaki aynı mesafeyi ayarlar, ancak konteyner ve kareler arasında değil. Boşluk etrafındaki kareler arasındaki aynı mesafeyi de belirler, ancak şimdi konteyner ve kareler arasındaki mesafe kareler arasındaki mesafenin yarısıdır.

Öğeleri hizalayın.

İçeriği yalnızca ana eksen ile çalışırsa, hizalı eşyalar, ana eksene dik eksen ile çalışır.

Flex-Direction'a geri dönelim: satır ve hizalama öğeleri komutlarından geçelim:

esnek başlangıç;
flex-end;
merkez;
uzatmak;
temel.

Hizalı eşyalar için şunları belirlemeye değer: karelerin yüksekliğini germek, otomatik olarak eşit olmalıdır. Hizalamalar için: Temel paragraf etiketlerinin kaldırılması gerekmez, aksi takdirde şöyle ortaya çıkıyor:

Eksen çalışmalarını daha iyi şekilde anlamak için, hizalı eşyalarla haklı çıkarmayı birleştirelim ve orta hizalamanın iki esnek yön özelliği için nasıl çalıştığını görünelim:

Kendini hizalayın.

Hizala-Kendini, öğeleri ayrı ayrı hizalamanızı sağlar.

#Container (Hizalama-Öğeler: Flex-start;) .Square # bir (Hizala-Self: Center;) // Sadece bu kare ortalanacaktır.

İki kare için Hizala-Kendini uygulayalım ve diğerleri için hizalı eşyalar uyguluyoruz: Merkez ve Esnek Yön: Satır.

Flex bazlı.

Flex-baz, diğer FlexBox özellikleri tarafından değiştirilmeden önce öğelerin ilk boyutundan sorumludur:

Flex-baz, ana eksen boyunca elemanların boyutunu etkiler.

Ana eksenin yönünü değiştirirsek ne olacağını görelim:

Öğelerin yüksekliğini değiştirmek zorunda olduğumuzu unutmayın. Flex-baz, eksenin yönüne bağlı olarak hem elementlerin yüksekliğini hem de genişliğini tanımlayabilir.

Esnek büyümek

Bu özellik biraz daha karmaşık.

Başlamak için, karelerinimize 120px'ün aynı genişliğine soralım:

Varsayılan olarak, esnek büyüme değeri 0'dır. Bu, karelerin büyümesi yasak olduğu anlamına gelir (konteynerdeki kalan yeri tutun).

Her kare için 1'e eşit esnekliği ayarlamaya çalışalım:

Kareler, konteynerdeki kalan yeri işgal etti. Esnek büyüme değeri genişlik değerini iptal eder.

Ancak burada bir soru var: Flex-Büyü Nedir: 1 Ortalama?

Flex-büyümeyi 999'a ayarlamaya çalışalım:

Ve ... hiçbir şey olmadı. Oldu çünkü esnek büyüyü mutlak değerleri değil, akraba olarak kabul etmiyor.

Bu, diğer karelerle ilgili olarak esneklikten hangi değerin önemli olduğunun önemli olmadığı anlamına gelir:

İlk başta, her kareyi esnek büyütün 1, ortaya çıktığı miktarda 6'dır. Bu nedenle, kapımız 6 parçaya bölünmüştür. Her kare, konteynerdeki mevcut alanın 1 / 6'sını alacaktır.

Üçüncü karenin esnek büyüsü 2 olduğunda, kap 7 parçaya bölünür (1 + 1 + 2 + 1 + 1 + 1).

Şimdi üçüncü kare 2/7 boşluk, gerisi - 1/7 işgal eder.

Flex-büyümesinin sadece ana eksen için çalıştığını hatırlamaya değerdir (yönünü değiştirene kadar).

Esnek küçültmek

Flex-Shrink - Flex-büyümesinin doğrudan karşısında. Meydanın boyutunda nasıl azaltılabileceğini belirler.

Flex-Shrink, öğeler kabın içine sığmadığında kullanılır.

Hangi unsurların boyutta azalması gerektiğini ve bu olmadığını belirlersiniz. Varsayılan olarak, her kare için Flex-Shrink değeri 1'dir. Bu, kabın azaldığında karelerin küçüleceği anlamına gelir.

Flex-Büyümesine ve Flex-Shrink'e 1'e eşit bırakın:

Şimdi, Flex-Shrink'in değerini üçüncü bir kare olarak değiştirelim. Küçülmesi yasaktır, bu nedenle genişliği 120px'e eşit kalır:

Flex-Shrink'in oranlara dayandığını hatırlamaya değer. Bu, Flex-Shrink Meydanı 6'dır ve diğerleri 2 ise, bu, bu, karımızın diğerlerinden üç kat daha hızlı sıkılacağı anlamına gelir.

Esnek

Flex esnek büyümeyi, esnek daralma ve esnek bazını değiştirir.

Varsayılan değerler: 0 (Büyümek) 1 (Shrink) ve Otomatik (baz).

İki kare oluşturun:

Kare # bir (Flex: 2 1 300px;) .Square # iki (Flex: 1 2 300px;)

Her iki karenin da aynı esnek bazına sahiptir. Bu, her ikisinin de 300 piksel (konteyner genişliği: 600px artı marjı ve dolgu) içinde genişlik olacağı anlamına gelir.

Ancak, konteyner boyutunda artmaya başladığında, birinci kare (büyük bir esnek büyüme ile) iki kat daha hızlı artacaktır ve ikinci kare (en yüksek esnek daralma ile) iki kat daha hızlı sıkıştırılır.

İşler nasıl büyür ve küçülür

İlk kare arttığında, ikinci kareden iki kat daha fazla almaz ve ikinci kare azalırken, ilkten iki kat daha az almaz. Bunun nedeni, esneklik ve esnek daralma, büyüme hızından ve azaltılmasından sorumludur.

Küçük bir matematik

Konteynerin ilk boyutu: 640px. Dolgu için her iki tarafta 20 piksel olarak izin verin, sadece iki kare için 600 piksel olacağız.

Kabın genişliği 430 piksel (210px'teki kayıp), ilk kare (Flex-Shrink: 1) 70px kaybettiğinde. İkinci kare (Flex-Shrink: 2) 140px kaybeder.

Konteyner 340px'e sıkıştırıldığında, 300px kaybederiz. İlk kare, ikinci - 200px, 100px kaybeder.

Aynı esneklikte olur.

CSS FlexBox (Esnek Kutu Düzeni Modülü) - Esnek konteyner düzeninin modülü, eksenin temeli, eksenin temelidir.

FlexBox dışarıdan oluşur flex Konteyner (Flex Container) ve esnek ürünler (Flex öğeleri). Esnek elemanlar dize veya sütuna yerleştirilebilir ve kalan boş alan aralarında çeşitli şekillerde dağıtılır.

FlexBox modülü, aşağıdaki görevleri çözmenizi sağlar:

Öğeleri dört yönden birine yerleştirin: Soldan sağa, sağ sola, yukarıdan aşağıya veya aşağıdan aşağıya doğru yerleştirin.
Öğeleri görüntüleme prosedürünü geçersiz kılın.
Eşyaların boyutlarını otomatik olarak belirler, böylece uygun fiyata sığacak şekilde.
Sorunu yatay ve dikey merkezlerle çözün.
Taşıtına izin vermeden kabın içindeki elemanları aktarın.
Aynı yüksekliğin sütunlarını oluşturun.
Sayfanın altına basıldığında oluşturun.

FlexBox belirli görevleri çözer - Örneğin, navigasyon panelinin, navigasyon panelinin oluşturulması, çünkü esnek elemanlar sadece eksenlerden birine yerleştirilebilir.

Modülün mevcut sorunlarının listesi ve bunlar için çapraz tarayıcı çözümlerinin listesi Philip Walton makalesinde okuyabilirsiniz.

FlexBox nedir

Destek tarayıcıları

Yani: 11.0, 10.0 ms-
Firefox: 28.0, 18.0 -MOZ-
Krom: 29.0, 21.0 -Webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -Webkit
iOS Safari: 7.0 -WebKit-
Opera Mini: 8
Android Tarayıcı: 4.4, 4.1 -WebKit-
Android için Chrome: 44

1. Temel kavramlar

İncir. 1. FlexBox Modeli

FlexBox modülünü tanımlamak için belirli bir terimler kümesi kullanılır. Flex-Flow Değeri ve Kayıt Modu, bu terimlerin yazışmalarını fiziksel yönlere göre belirler: Üst / Sağ / Alt / Sol, Eksenler: Dikey / Yatay ve Boyut: Genişlik / Yükseklik.

Ana eksen - Flex elemanlarının yerleştirildiği eksen. Esas olarak ölçmeyi uzatır.

Ana başlatma ve ana son - Flex kabının ilk ve son tarafını, esnek elemanların yerleştirildiği (ana başlığa doğru ana başlamadan başlayarak) olarak tanımlayan çizgiler.

Ana boyut) - Esnek kabın veya esnek elemanların genişliği veya yüksekliği, esas olarak ölçüldüklerine bağlı olarak, esnek kabın ana boyutunu veya esnek elemanın ana boyutunu belirler.

Çapraz eksen - Ana eksene dik eksen. Enine boyutta uzanır.

Çapraz başlangıç \u200b\u200bve çapraz uç - Enine eksenin ilk ve son tarafını, esnek elemanların yerleştirildiği göreceli olarak tanımlayan çizgiler.

Çapraz boyutu) - Enine boyutta olanlara bağlı olarak, flex-konteyner veya esnek elemanların genişliği veya yüksekliği, enine boyutlarıdır.

İncir. 2. Satır ve sütun modu

2. Flex-konteyner

Flex Container, içerikleri için yeni bir esnek biçimlendirme bağlamı ayarlar. Flex konteyneri bir blok kabı değildir, bu nedenle şamandıra, net, dikey hizalama gibi CSS özellikleri çocuk elemanları için çalışmaz. Ayrıca, esnek kabı, metnin ve sözde elemanlara hoparlörler oluşturur, metnin ve psödo elemanları :: First Line ve :: First Letter.

FlexBox Markup Model, kendi içinde alt seçim blokları içeren ana HTML elemanının ekranının CSS özelliğinin belirli bir değeri ile ilişkilidir. Bu modeli kullanarak elemanları kontrol etmek için, ekran özelliğini aşağıdaki gibi ayarlamanız gerekir:

Flex-Container (/ * bir esnek kapsayıcı bloğu oluşturur * / ekran: -Webkit-Flex; Ekran: Flex;) .Flex-Container (/ * Flex-Container Dize Seviyesi * / Ekran: -WebKit-Inline-Flex ; Ekran: satır içi-flex;)

Bu özellik değerlerini yükledikten sonra, her bir çocuk öğesi otomatik olarak bir esnek eleman olur, bir satırda (ana eksen boyunca) ayarlayın. Bu durumda, blok ve küçük harf elemanları eşit davranır, yani. Blokların genişliği, içeriğin iç alanlarını ve çerçevelerini dikkate alarak içeriğinin genişliğine eşittir.

İncir. 3. FlexBox modelinde hizalama elemanları

Ebeveyn bloğu sarmalayıcı olmayan metin veya görüntüler içeriyorsa, anonim esnek elemanlar olurlar. Metin, konteyner bloğunun üst kenarı üzerinde seviyelendirilir ve görüntünün yüksekliği bloğun yüksekliğine eşitleşir, yani. Deforme olmuş.

3. Flex-elements

Flex-elements - Akıştaki esnek kabın içeriğini temsil eden bloklar. Esnek kabı, aşağıdaki özelliklere neden olan içerikleri için yeni bir formatlama bağlamı oluşturur:

Flex elemanları için, ekran özelliğinin değeri engellenmiştir. Ekran değeri: satır içi blok; ve ekran: tablo hücresi; ekranda hesaplanan: blok; .
Elementler arasındaki boş boşluk ortadan kalkar: Elementler arası metin, anonim bir esnek elemana sarılsa bile, kendi esnek elemanı haline gelmez. Anonim bir esnek elemanın içeriği için, kendi stillerini belirlemek imkansızdır, ancak bunları (örneğin, yazı tipi parametreleri) esnek kaptan miras alır.
Kesinlikle konumlandırılmış esnek eleman düzen düzenine katılmıyor.
Bitişik esnek elemanların marjı alanları daraltılmaz.
Marjın ve dolgunun yüzdesi değerleri, bunları içeren bloğun iç boyutundan hesaplanır.
marj: Otomatik; Genişler, uygun ölçümde ek alanı emer. Bitişik esnek elemanları hizalamak veya yaymak için kullanılabilirler.
Varsayılan olarak otomatik minimum esnek eleman boyutu, içeriğinin minimum boyutudur, yani Min-Genişlik: Otomatik; . Kaydırma kapları için, otomatik minimum boyut genellikle sıfırdır.

4. Flex-elements ve oryantasyon

Esnek kabın içeriği herhangi bir yönde ayrıştırılabilir ve herhangi bir sırada (kabın içindeki esnek elemanların yeniden sıralanması yalnızca görsel renderleri etkiler).

4.1. Ana eksenin yönü: esnek yön

Mülkiyet Flex konteynerine aittir. Mevcut kayıt moduna göre, esnek elemanların istiflendiği ana eksenin yönünü yönetir. Miraslanmadı.

esnek yön.
Değerler:
Kürek çekmek	Soldan sağa varsayılan değer (RTL'de sağa sola). Flex elemanları dizede yerleştirilir. Ana eksenin başlangıcında (ana başlatma) ve son (ana-ucu) yönergeleri, satır iç ekseninin (satır içi eksen) (satır içi eksen) başlangıcına (inline-start) ve bir ucuna (satır içi uç) karşılık gelir.
Satır geri.	Sağ soldaki yön (RTL'de sağdan sağa). Flex-elementler, kabın sağ kenarına (RTL - solda) göre dize yerleştirilir.
sütun.	Yukarıdan aşağıya doğru yön. Flex elemanları sütunda ortaya konur.
Sütun gerisi.	Ters sırayla elemanlı sütun, aşağı yukarı.
ilk
kalıtım.

İncir. 4. Soldan sağa doğru diller için esnek yön özelliği

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; -Webkit-Flex-Flex: Sıra-Tersi; Ekran: Flex; Flex-Direction: Sıra-ters;)

4.2. Çoklu Flex Konteyner Yönetimi: Flex-Wrap

Özellik, esnek kabın tek hatlı veya çok satırlı olup olmayacağını belirler ve ayrıca, yeni esnek konteyner çizgilerinin döşenmesinin yönünü belirleyen enine eksenin yönünü belirler.

Varsayılan olarak, esnek elemanlar ana eksen boyunca bir satırda istiflenir. Taşma olduğunda, esnek kabın limit çerçevesinin ötesine geçerler. Mülkiyet miras kalmadı.

İncir. 5. LTR-Diller için Flex-Wrap Özelliklerini kullanarak çoklu akışın yönetilmesi

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; -Webkit-Flex-wrap: Sarma; Ekran: Flex; Flex-wrap: Sarma;)

4.3. Yön ve Multiplay'in Özeti: Flex-Flow

Tesis, ana ve enine eksenlerin yönlerini belirlemenizi ve ayrıca birkaç satır için gerekirse esnek elemanları aktarma olasılığına izin verir. Esnek yön ve esnek sarma özelliklerinin kısaltılmış bir kaydıdır. Varsayılan değer esnek akış: satır nowrap; . Mülkiyet miras kalmadı.

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; -Webkit-Flex-Flow: Sıra Sarma; Ekran: Flex; Flex-Flow: Satır Sarma;)

4.4. Flex Element Ekran Siparişi: Sipariş

Mülkiyet, esnek elemanların görüntülendiği ve esnek kabın içine yerleştirildiği sırayı belirler. Esnek elementler için geçerlidir. Mülkiyet miras kalmadı.

Başlangıçta, tüm esnek elemanların siparişi vardır: 0; . Öğe için -1'den değeri belirlerken, zamanın başlangıcına, değeri 1 - sonuna kadar hareket eder. Birkaç esnek eleman aynı sipariş değerine sahipse, orijinal siparişe göre gösterilecektir.

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .flex-item (-Webkit-Sipariş: 1; Sipariş: 1;)
İncir. 6. Flex-elements Ekran Siparişi

5. Esnek esnek elemanlar

Esnek bir düzenin belirlenmesi, esnek elemanları "bükme", ana boyuttaki mevcut alanı doldurmak için genişliğini / yüksekliğini (hangi boyutun ana ekseninde olduğu bağlı olarak) değiştirme kabiliyetidir. Bu, Flex özelliği kullanılarak yapılır. Esnek kabı, alt elemanları (esnek büyüme katsayılarıyla orantılı olarak) arasındaki boş alanı, kabı doldurmak veya taşması önlemek için bunları (esnek daralma katsayısına) sıkıştırır.

Esnek eleman, esneklik büyümesi ve esnek-shrink değerleri sıfırdır ve aksi takdirde "esnek" ise tamamen "esnek değildir" olacaktır.

5.1. Tek bir özellik ile esnek boyutlar kümesi: Flex

Özellik, esnek büyüme büyümesinin kısaltılmış bir kaydı, Flex-Shrink ve Flex-baz özellikleridir. Varsayılan değer: Flex: 0 1 Otomatik; . Hem bir hem de her üç özelliği de belirleyebilirsiniz. Mülkiyet miras kalmadı.

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .Flex-item (-Webkit-Flex: 3 1 100PX; -MS-Flex: 3 1 100PX; Flex: 3 1 100PX;)

5.2. Büyüme Katsayısı: Flex-Büyümek

Mülkiyet, pozitif boş alanın dağılımı sırasında esnek kabın içindeki diğer esnek elemanlara göre bir esnek elemanın büyüme katsayısını belirler. Dizedeki flex-büyütme esnek elemanlarının değerlerinin toplamı 1'den azsa, boş alanın% 100'ünden az işgal ederler. Mülkiyet miras kalmadı.

İncir. 7. Flex-büyümeyi kullanarak gezinti bölmesindeki boş alanın yönetimi

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .flex-item (-Webkit-Flex-Büyümek: 3; Flex-Büyümek: 3;)

5.3. Sıkıştırma oranı: Flex-Shrink

Özellik, negatif boş alanın dağılımı sırasında flex elemanının diğer esnek elemanlara göre sıkıştırma katsayısını gösterir. Esnek bazın temel boyutuyla çarpılır. Negatif alan, elemanın ne kadar tutulabileceği ile orantılı olarak dağıtılır, bu nedenle, örneğin, daha büyük boyutun esnek elemanı gözle görülür şekilde azaltılıncaya kadar küçük bir esnek eleman sıfıra düşmez. Mülkiyet miras kalmadı.

İncir. 8. Dizedeki esnek elemanların daralması

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .flex-item (-Webkit-Flex-Shrink: 3; Flex-Shrink: 3;)

5.4. Temel Boyut: Flex bazlı

Özellik, esnek elemanın ilk ana boyutunu esneklik katsayılarına uygun olarak serbest alan dağılımından önce ayarlar. Tüm değerler için, otomatik ve içerik hariç, temel esnek boyut, yatay kayıt modlarında genişlik de tanımlanır. Yüzde değerleri, esnek kabın boyutuna göre belirlenir ve boyut belirtilmezse, esnek bazda kullanılan değer, içeriğinin boyutudur. Miraslanmadı.

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .Flex-item (-Webkit-Flex-esası: 100px; Flex-esas: 100px;)

6. Hizalama

6.1. Ana eksen üzerinde hizalama: haklı olarak içerik

Özellik, flex-konteynerin ana ekseni boyunca esnek elemanları hizalar, boş alanın esnek elemanları tarafından boşaltılmamış. Öğe bir esnek kabın içine dönüştürüldüğünde, varsayılan esnek elemanlar birlikte gruplanır (eğer kenar boşluğu alanı belirtilmemişse). Boşluklar, marjın değerlerini hesapladıktan sonra eklenir ve esneklik. Herhangi bir öğenin sıfır olmayan bir esneklik veya marj değerine sahipse: Otomatik; Mülkün hiçbir etkisi olmayacak. Mülkiyet miras kalmadı.


Değerler:
Flex-start.	Varsayılan değer. Esnek elemanlar, esnek kabın ilk satırından gelen yönde ortaya konur.
Esnek uç.	Flex-elements, esnek kabın son çizgisinden gelen yönde ortaya konur.
Merkez	Flex elemanları, esnek kabın ortasına hizalanır.
Arasındaki boşluk.	Flex elemanları düzgün bir şekilde çizginin üzerine dağıtılır. İlk esnek eleman, başlangıç \u200b\u200bçizgisinin kenarına yerleştirilir, son esnek eleman, son çizginin kenarıyla aynı hizada olup, hattaki kalan esnek elemanlar, herhangi bir iki bitişik eleman arasındaki mesafenin olduğu için dağıtılır. aynısı. Kalan boş alan olumsuz veya dizgede ise, yalnızca bir esnek eleman var, bu değer esnek başlangıç \u200b\u200bparametresiyle aynıdır.
Boşluk.	Çizgilerdeki esnek elemanlar, herhangi bir iki bitişik esnek eleman arasındaki mesafenin aynı olması ve ilk / son esnek elemanlar arasındaki mesafe ve esnek kabın kenarları arasındaki mesafe, esnek elemanlar arasındaki mesafeden uzanır.
ilk	Varsayılan özellik değerini ayarlar.
kalıtım.	Mülkiyetin değerini ebeveyn elementinden devralır.

İncir. 9. GUBIT-Content özelliklerini kullanarak elementlerin ve boş alanın dağılımı

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; -Webkit-Justify-Content: Flex-start; Ekran: Flex; Justify-Content: Flex-start;)

6.2. Enine ekseni hizalayın: Hizalama-Öğeler ve Hizala-Kendini

Flex elemanları, esnek kabın akım çizgisinin enine eksenine hizalanabilir. Hizalama eşyaları, anonim esnek elemanlar da dahil olmak üzere tüm esnek kapsayıcı elemanları için hizalamayı ayarlar. Hizala-Kendini, bireysel esnek elemanlar için bu hizalamayı geçersiz kılar. Enine marj esnek elemanından herhangi biri otomatik olduğunda, hizala kendisinin etkisi yoktur.

6.2.1. Hizalı eşyalar.

Mülkiyet, enine eksendeki anonim esnek elemanlar da dahil olmak üzere esnek elemanları hizalar. Miraslanmadı.


Değerler:
Flex-start.
Esnek uç.
Merkez
Taban çizgisi	Hizalama ile ilgili tüm esnek elemanların temel çizgileri çakışır.
Uzatmak.
ilk	Varsayılan özellik değerini ayarlar.
kalıtım.	Mülkiyetin değerini ebeveyn elementinden devralır.

İncir. 10. Dikey bir kapta elemanların hizalanması

Sözdizimi

Flex-Containge (Ekran: -Webkit-Flex; -Webkit-Hizansa-Öğeler: Flex-Start; Ekran: Flex; Hizalama-Öğeler: Flex-start;)

6.2.2. Hizala-benlik.

Özellik, esnek kabın yüksekliğinde ayrı bir esnek elemanın hizalanmasından sorumludur. Hizalamayı, hizalı eşyalar tarafından belirtilen hizalamayı geçersiz kılar. Miraslanmadı.


Değerler:
OTO.	Varsayılan değer. Flex elemanı, Alegn-items Flex Container özelliğinde belirtilen hizalamayı kullanır.
Flex-start.	Flex elemanının üst kenarı, enine eksenin başlangıcından geçen esnek çizgiyle (veya bir mesafeden veya bir mesafede) yakın bir şekilde yerleştirilir.
Esnek uç.	Esnek elemanın alt kenarı, enine eksenin ucundan geçen esnek çizgiyle (veya bir mesafede, bir mesafeden veya bir mesafede) yakından yerleştirilir.
Merkez	Flex elemanı alanları, flex hattı içindeki enine eksen üzerinde ortalanır.
Taban çizgisi	Esnek eleman taban çizgisi ile hizalanır.
Uzatmak.	Flex elemanının enine boyutu otomatik olarak hesaplanırsa ve kenar boşluğunun enine değerlerinin hiçbiri otomatik olarak eşit değilse, eleman gerilir. Varsayılan değer.
ilk	Varsayılan özellik değerini ayarlar.
kalıtım.	Mülkiyetin değerini ebeveyn elementinden devralır.

İncir. 11. Bireysel esnek elementlerin hizalanması

Sözdizimi

Flex-Container (Ekran: -Webkit-Flex; Ekran: Flex;) .Flex-item (-Webkit-Hizans-Self: Center; Hizala-Self: Center;)

6.3. Flex Konteyner Hatları: Hizalama İçeriği

Mülkiyet, enine eksende ilave eksende ek bir alan varsa, HUSYAL-Content özelliğini kullanarak ana eksendeki bireysel elemanların hizalanmasına benzer şekilde, esnek kaptaki çizgileri çizer. Tesis, tek çizgili esnek kabı etkilemez. Miraslanmadı.


Değerler:
Flex-start.	Satırlar, esnek kabın başlangıcına doğru kaydedilir. İlk satırın kenarı, her bir sonraki satıra yakın, her biri - her bir sonraki satıra yakın olan flex-konteynerin kenarına yakın yerleştirilir.
Esnek uç.	Satırlar, esnek kabın ucuna doğru uzanır. Son satırın kenarı, her biri bir sonraki satıra yakın olan her biri - Flex-Conster'ın kenarına yakın yerleştirilir.
Merkez	Satırlar, esnek kabın ortasına doğru kaydedilir. Satırlar birbirine yakındır ve esnek kabın içeriğinin ilk kenarı ile Flex kabın içeriğinin son kenarı ile esnek kabın içeriğinin son kenarı arasında eşit bir mesafeye sahip olan flex-konteynerin ortasına hizalanır. Son dize.
Arasındaki boşluk.	Satırlar, esnek kabın içinde düzgün bir şekilde dağıtılır. Kalan boş alan negatifse veya esnek kabın yalnızca bir esnek çizgisine sahipse, bu değer esnek başlangıç \u200b\u200bile aynıdır. Aksi takdirde, birinci satırın kenarı, esnek kabın içeriğinin ilk kenarına yakın yerleştirilir, son sıranın kenarı, esnek kabın içeriğinin son kenarına yakındır. Kalan çizgiler, herhangi bir bitişik satır arasındaki mesafenin aynı olması için dağılmıştır.
Boşluk.	Satırlar, her iki ucunda da yarım boşlukla esnek kapta düzgün bir şekilde dağıtılır. Kalan boş alan negatifse, bu değer orta merkez ile aynıdır. Aksi takdirde, dizeler, iki bitişik satır arasındaki mesafenin aynı olduğu ve birinci / son satırlar arasındaki mesafenin ve esnek kabın içeriğinin kenarları arasındaki mesafenin, çizgiler arasındaki mesafeden uzağa kadar uzanacağı şekilde dağıtılır.
Uzatmak.	Varsayılan değer. Flex elemanlarının satırları, mevcut tüm alanları doldurarak eşit şekilde gerilir. Kalan boş alan negatifse, bu değer esnek başlangıç \u200b\u200bile aynıdır. Aksi takdirde, boş alan, enine boyutlarını arttırarak tüm satırlar arasında eşit olarak ayrılacaktır.
ilk	Varsayılan özellik değerini ayarlar.
kalıtım.	Mülkiyetin değerini ebeveyn elementinden devralır.

İncir. 12. Esnek elemanların çok satır hizalaması

Sözdizimi

Flex-Containge (Ekran: -Webkit-Flex; -Webkit-Flex-Flex: Sıra Sarma; -Webkit-Hizansa İçeriği: Flex-end; Ekran: Flex; Flex-Flow: Satır Sarma; Hizalama: Flex-end ; Yükseklik: 100px;)