Tam Flexbox Kılavuzu - CSS Hileleri

Arka fon

Flexbox LayoutDaha etkili bir yolunu sağlamayı amaçları (Esnek Kutu) modülü (Ekim 2017 itibariyle bir W3C Aday Öneri) hazırlamak, hizalama ve böylece (boyutları bilinmeyen ve / veya dinamik olsa bile, bir kap içinde öğeleri arasında yer dağıtmak için "flex" kelimesi).

Esnek düzenin arkasındaki ana fikir, konteynere öğelerinin genişliğini / yüksekliğini (ve sırasını) mevcut alanı en iyi şekilde dolduracak şekilde (çoğunlukla her tür görüntüleme cihazına ve ekran boyutuna uyacak şekilde) değiştirme yeteneği vermektir. Esnek bir kap, öğeleri mevcut boş alanı dolduracak şekilde genişletir veya taşmayı önlemek için küçültür.

En önemlisi, flexbox düzeni, normal düzenlerin (dikey tabanlı ve yatay tabanlı satır içi blok) aksine yönden bağımsızdır. Bunlar sayfalar için iyi çalışsa da, büyük veya karmaşık uygulamaları (özellikle yön değiştirme, yeniden boyutlandırma, esnetme, küçültme vb. Söz konusu olduğunda) destekleme esnekliğinden (kelime anlamı yoktur) yoksundurlar.

Not: Flexbox düzeni, bir uygulamanın bileşenleri ve küçük ölçekli düzenler için en uygun olanıdır; Kılavuz düzeni ise daha büyük ölçekli düzenler içindir.

Temel Bilgiler ve Terminoloji

Flexbox bütün bir modül olduğundan ve tek bir özellik olmadığından, tüm özellikleri dahil olmak üzere birçok şeyi içerir. Bazılarının kapta ("esnek kap" olarak bilinen ana öğe), diğerlerinin alt öğelerde ("esnek öğeler" olarak adlandırılan) ayarlanması amaçlanmıştır.

"Normal" düzen hem blok hem de satır içi akış yönlerine dayanıyorsa, esnek düzen "esnek akış yönlerine" dayanır. Lütfen bu şekle, esnek yerleşim düzeninin arkasındaki ana fikri açıklayan spesifikasyondan bir göz atın.

Ürünleri ya da aşağıdaki şekilde düzenlenir main axis(den main-startiçin main-end) veya (çapraz ekseni cross-startiçin cross-end).

• ana eksen - Bir esnek kabın ana ekseni, esnek öğelerin yerleştirildiği birincil eksendir. Dikkat edin, yatay olması gerekmez; flex-directionmülke bağlıdır (aşağıya bakın).
• ana başlangıç ​​| main-end - Esnek öğeler, ana başlangıçtan başlayarak ana uca giden kabın içine yerleştirilir.
• ana boyut - Bir esnek öğenin genişliği veya yüksekliği, hangisi ana boyutta olursa, öğenin ana boyutudur. Flex öğesinin ana boyut özelliği, ana boyutta hangisi olursa olsun ya 'genişlik' ya da 'yükseklik' özelliğidir.
• çapraz eksen - Ana eksene dik olan eksene çapraz eksen denir. Yönü ana eksen yönüne bağlıdır.
• çapraz başlangıç ​​| çapraz uç - Esnek çizgiler, öğelerle doldurulur ve esnek kabın çapraz başlangıç ​​tarafından başlayıp çapraz uç tarafına doğru kabın içine yerleştirilir.
• çapraz boyut - Esnek bir öğenin genişliği veya yüksekliği, hangisi çapraz boyutta olursa olsun, öğenin çapraz boyutudur. Çapraz boyut özelliği, çapraz boyuttaki "genişlik" veya "yükseklik" değerlerinden hangisidir.

Afişi alın!

Bu kılavuzu çok mu referans alıyorsunuz? Ofis duvarına bir kopyasını asın.

Poster Satın Al

Üst
Öğe Özellikleri (esnek kapsayıcı)

Görüntüle

Bu, bir esnek kabı tanımlar; verilen değere bağlı olarak satır içi veya blok. Tüm doğrudan çocukları için esnek bir bağlam sağlar.

.container ( display: flex; /* or inline-flex */ )

CSS sütunlarının esnek bir kap üzerinde etkisi olmadığını unutmayın.

esnek yön

Bu, ana ekseni oluşturur, böylece esnek öğelerin esnek konteynere yerleştirilme yönünü tanımlar. Flexbox, (isteğe bağlı paketlemenin yanı sıra) tek yönlü bir düzen konseptidir. Esnek öğeleri öncelikle yatay sıralarda veya dikey sütunlarda düzenlenmiş olarak düşünün.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

• row(varsayılan): soldan sağa içeri ltr; sağdan solartl
• row-reverse: sağdan sola ltr; soldan sağartl
• column: aynı rowama yukarıdan aşağıya
• column-reverse: aynı row-reverseama aşağıdan yukarıya

esnek sarma

Varsayılan olarak, esnek öğelerin tümü tek bir satıra sığmaya çalışır. Bu özellik ile bunu değiştirebilir ve öğelerin gerektiğinde sarılmasına izin verebilirsiniz.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

• nowrap (varsayılan): tüm esnek öğeler tek satırda olacaktır
• wrap: flex öğeler yukarıdan aşağıya birden çok satıra sarılır.
• wrap-reverse: flex öğeler, aşağıdan yukarıya birçok satıra sarılır.

Burada bazı görsel demolar flex-wrapvar.

esnek akış

Bu, esnek kabın ana ve çapraz eksenlerini birlikte tanımlayan flex-directionve flex-wrapözelliklerinin kısaltmasıdır . Varsayılan değer row nowrap.

.container ( flex-flow: column wrap; )

haklı içerik

Bu, ana eksen boyunca hizalamayı tanımlar. Bir satırdaki tüm esnek öğeler esnek olmadığında veya esnek olduğunda ancak maksimum boyutlarına ulaştığında fazladan boş alan dağıtılmasına yardımcı olur. Ayrıca, satırdan taştıklarında öğelerin hizalanması üzerinde bir miktar kontrol uygular.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

• flex-start (varsayılan): öğeler esnek yönün başlangıcına doğru paketlenir.
• flex-end: öğeler esnek yönün sonuna doğru paketlenir.
• start: öğeler writing-modeyönün başlangıcına doğru paketlenir .
• end: öğeler writing-modeyönün sonuna doğru paketlenir .
• left: öğeler kabın sol kenarına doğru paketlenir, bununla mantıklı gelmediği sürece flex-direction, o zaman gibi davranır start.
• right: öğeler, kutunun sağ kenarına doğru paketlenir, bununla mantıklı gelmediği sürece flex-direction, o zaman gibi davranır end.
• center: öğeler çizgi boyunca ortalanır
• space-between: öğeler satırda eşit olarak dağıtılır; ilk öğe başlangıç ​​satırında, son öğe bitiş satırında
• space-around: öğeler, etraflarında eşit boşluk olacak şekilde satırda eşit olarak dağıtılır. Tüm öğeler her iki tarafta eşit alana sahip olduğundan, boşlukların görsel olarak eşit olmadığını unutmayın. İlk öğe, kap kenarına karşı bir birim alana sahip olacak, ancak sonraki öğe arasında iki birim boşluk olacaktır, çünkü sonraki öğenin kendi aralığı geçerli olacaktır.
• space-evenly: öğeler, herhangi iki öğe arasındaki boşluk (ve kenarlara kadar olan boşluk) eşit olacak şekilde dağıtılır.

Bu değerler için tarayıcı desteğinin nüanslı olduğunu unutmayın. Örneğin, space-betweenEdge'in bazı sürümlerinden hiçbir zaman destek alınmadı ve başlangıç ​​/ bitiş / sol / sağ henüz Chrome'da değil. MDN ayrıntılı tablolara sahiptir. En güvenli değerlerdir flex-start, flex-endve center.

Bu değerlerle eşleştirebileceğiniz iki ek anahtar kelime daha vardır: safeve unsafe. Kullanmak safe, bu tür konumlandırmayı nasıl yaparsanız yapın, bir öğeyi içerik de kaydırılamayacak şekilde ekran dışında (ör. Üstte) olacak şekilde itemezsiniz ("veri kaybı" olarak adlandırılır) .

hizalama öğeleri

Bu, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirildiğine ilişkin varsayılan davranışı tanımlar . Bunu justify-contentçapraz eksen versiyonu olarak düşünün ( ana eksene dik).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

• stretch (varsayılan): kabı doldurmak için uzat (yine de min-genişlik / maksimum-genişliğe saygı göster)
• flex-start/ start/ self-start: öğeler çapraz eksenin başlangıcına yerleştirilir. Bunlar arasındaki fark ince ve flex-directionkurallara veya kurallara saygı writing-modeduymakla ilgilidir.
• flex-end/ end/ self-end: öğeler çapraz eksenin sonuna yerleştirilir. Fark yine ince ve flex-directionkurallara karşı writing-modekurallara saygı duymakla ilgili .
• center: öğeler çapraz eksende ortalanır
• baseline: öğeler, taban çizgilerinin hizalanması gibi hizalanır

safeVe unsafedeğiştirici anahtar kelime içerik erişilemez hale gelir, öyle ki elemanını dizmek önlemek yardımcı olan tüm bu anahtar kelimelerin kalanı (her ne kadar not tarayıcı desteği) ve anlaşma ile birlikte kullanılabilir.

hizalama içeriği

Bu justify-content, ana eksende tek tek öğeleri hizalama işlemine benzer şekilde, çapraz eksende fazladan boşluk olduğunda içindeki esnek kabın çizgilerini hizalar.

Note: This property only takes effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow is set to its default value, no-wrap) will not reflect align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

• normal (default): items are packed in their default position as if no value was set.
• flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: items evenly distributed with equal space around each line
• space-evenly: items are evenly distributed with equal space around them
• stretch: lines stretch to take up the remaining space

The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.

Properties for the Children
(flex items)

order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item ( order: 5; /* default is 0 */ )

flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

.item ( flex-grow: 4; /* default 0 */ )

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item ( flex-shrink: 3; /* default 1 */ )

Negative numbers are invalid.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

.item ( flex-basis: | auto; /* default auto */ )

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

.item ( flex: none | ( ? || ) )

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Note that float, clear and vertical-align have no effect on a flex item.

Examples

Let’s start with a very very simple example, solving an almost daily problem: perfect centering. It couldn’t be any simpler if you use flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

This relies on the fact a margin set to auto in a flex container absorb extra space. So setting a vertical margin of auto will make the item perfectly centered in both axes.

Now let’s use some more properties. Consider a list of 6 items, all with fixed dimensions, but can be auto-sized. We want them to be evenly distributed on the horizontal axis so that when we resize the browser, everything scales nicely, and without media queries.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to CodePen and try resizing your windows to see what happens.

Let’s try something else. Imagine we have a right-aligned navigation element on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Let’s try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Prefixing Flexbox

Flexbox requires some vendor prefixing to support the most browsers possible. It doesn’t just include prepending properties with the vendor prefix, but there are actually entirely different property and value names. This is because the Flexbox spec has changed over time, creating an “old”, “tweener”, and “new” versions.

Perhaps the best way to handle this is to write in the new (and final) syntax and run your CSS through Autoprefixer, which handles the fallbacks very well.

Alternatively, here’s a Sass @mixin to help with some of the prefixing, which also gives you an idea of what kind of things need to be done:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Related Properties

• A Complete Guide to Grid
• Almanac entries on Grid properties, like grid-row / grid-column

Other Resources

• Flexbox in the CSS specifications
• Flexbox at MDN
• Flexbox at Opera
• Diving into Flexbox by Bocoup
• Mixing syntaxes for best browser support on CSS-Tricks
• Flexbox by Raphael Goetter (FR)
• Flexplorer by Bennett Feely

Bugs

Flexbox is certainly not without its bugs. The best collection of them I’ve seen is Philip Walton and Greg Whitworth’s Flexbugs. It’s an open-source place to track all of them, so I think it’s best to just link to that.

Tarayıcı Desteği

Flexbox "versiyonu" tarafından ayrılmıştır:

• (yeni), spesifikasyondaki son sözdizimi anlamına gelir (örn. display: flex;)
• (tweener), 2011'den kalma garip bir resmi olmayan sözdizimi anlamına gelir (örneğin display: flexbox;)
• (eski), 2009'daki eski sözdizimi anlamına gelir (örneğin display: box;)

Krom	Safari	Firefox	Opera	IE	Kenar	Android	iOS
20- (eski) 21+ (yeni)	3.1+ (eski) 6.1+ (yeni)	2-21 (eski) 22+ (yeni)	12.1+ (yeni)	10 (ara) 11+ (yeni)	17+ (yeni)	2.1+ (eski) 4.4+ (yeni)	3.2+ (eski) 7.1+ (yeni)

Blackberry tarayıcı 10+ yeni sözdizimini destekler.