Un ghid complet pentru Flexbox - CSS-Tricks

fundal

Modulul Flexbox Layout(Cutie flexibilă) (o recomandare a candidatului W3C începând din octombrie 2017) urmărește să ofere o modalitate mai eficientă de a amplasa, alinia și distribui spațiul printre articolele dintr-un container, chiar și atunci când dimensiunea lor este necunoscută și / sau dinamică (deci cuvântul „flex”).

Ideea principală din spatele aspectului flex este de a oferi containerului posibilitatea de a modifica lățimea / înălțimea articolelor sale (și comanda) pentru a umple cel mai bine spațiul disponibil (în special pentru a se adapta la toate tipurile de dispozitive de afișare și dimensiuni ale ecranului). Un container flexibil extinde articolele pentru a umple spațiul liber disponibil sau le micșorează pentru a preveni revărsarea.

Cel mai important, aspectul flexbox este direcțional-agnostic spre deosebire de aspectele obișnuite (bloc care se bazează pe verticală și în linie care se bazează pe orizontală). În timp ce acestea funcționează bine pentru pagini, le lipsește flexibilitatea (fără joc de cuvinte) pentru a sprijini aplicații mari sau complexe (mai ales când vine vorba de schimbarea orientării, redimensionare, întindere, micșorare etc.).

Notă: aspectul Flexbox este cel mai potrivit pentru componentele unei aplicații și aspectele la scară mică, în timp ce aspectul Grid este destinat pentru aspectele la scară mai mare.

Noțiuni de bază și terminologie

Deoarece flexbox este un întreg modul și nu o singură proprietate, implică o mulțime de lucruri, inclusiv întregul său set de proprietăți. Unele dintre ele sunt menite să fie așezate pe container (element părinte, cunoscut sub numele de „container flexibil”), în timp ce altele sunt menite să fie așezate pe copii (menționate „articole flexibile”).

Dacă aspectul „obișnuit” se bazează atât pe direcțiile de flux cât și pe cele de linie, aspectul flex se bazează pe „direcțiile de debit flex”. Vă rugăm să aruncați o privire la această figură din specificații, explicând ideea principală din spatele aspectului flex.

Elementele vor fi stabilite în următoarele , fie main axis( de la main-starta main-end) sau axa transversală (de cross-startla cross-end).

axa principală - Axa principală a unui container flexibil este axa primară de-a lungul căreia sunt așezate articolele flexibile. Atenție, nu este neapărat orizontală; depinde de flex-directionproprietate (vezi mai jos).
main-start | main-end - Articolele flexibile sunt plasate în container începând de la main-start și mergând până la main-end.
dimensiune principală - Lățimea sau înălțimea unui element flexibil, indiferent de dimensiunea principală, este dimensiunea principală a elementului. Proprietatea de dimensiune principală a elementului flexibil este fie proprietatea „lățime”, fie „înălțime”, oricare dintre acestea se află în dimensiunea principală.
axa transversală - Axa perpendiculară pe axa principală se numește axa transversală. Direcția sa depinde de direcția axei principale.
cross-start | cross-end - Liniile flexibile sunt umplute cu articole și plasate în container începând de la partea transversală a containerului flex și mergând spre partea transversală.
dimensiune transversală - Lățimea sau înălțimea unui element flexibil, indiferent de dimensiunea transversală, este dimensiunea transversală a elementului. Proprietatea dimensiunii transversale este cea dintre „lățime” sau „înălțime” care se află în dimensiunea transversală.

Ia posterul!

Faceți referire la acest ghid mult? Fixează o copie pe peretele biroului.

Cumpărați poster

Proprietăți pentru părinte
(container flex)

afişa

Aceasta definește un container flexibil; în linie sau bloc în funcție de valoarea dată. Permite un context flexibil pentru toți copiii săi direcți.

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

Rețineți că coloanele CSS nu au niciun efect asupra unui container flexibil.

direcție flexibilă

Aceasta stabilește axa principală, definind astfel direcția elementelor flexibile sunt plasate în containerul flexibil. Flexbox este (în afară de împachetarea opțională) un concept de aspect cu o singură direcție. Gândiți-vă la elementele flexibile ca fiind în primul rând așezate fie în rânduri orizontale, fie în coloane verticale.

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

row(implicit): de la stânga la dreapta în ltr; de la dreapta la stânga înrtl
row-reverse: de la dreapta la stânga în ltr; de la stânga la dreapta înrtl
column: la fel ca rowdar de sus în jos
column-reverse: la fel ca row-reversedar de jos în sus

flex-wrap

În mod implicit, articolele flexibile vor încerca să se potrivească pe o singură linie. Puteți schimba acest lucru și permite articolelor să se înfășoare după cum este necesar cu această proprietate.

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

nowrap (implicit): toate elementele flexibile vor fi pe un singur rând
wrap: elementele flexibile se vor înfășura pe mai multe linii, de sus în jos.
wrap-reverse: elementele flexibile se vor înfășura pe mai multe linii de jos în sus.

Există câteva demonstrații vizuale de flex-wrapaici.

flex-flow

Aceasta este o prescurtare pentru proprietățile flex-directionși flex-wrap, care împreună definesc axele principale și transversale ale containerului flexibil. Valoarea implicită este row nowrap.

.container ( flex-flow: column wrap; )

justify-content

Aceasta definește alinierea de-a lungul axei principale. Ajută la distribuirea spațiului liber suplimentar rămas atunci când fie toate elementele flexibile pe o linie sunt inflexibile, fie sunt flexibile, dar au atins dimensiunea maximă. De asemenea, exercită un anumit control asupra alinierii elementelor atunci când acestea deversează linia.

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

flex-start (implicit): articolele sunt împachetate spre începutul direcției flex.
flex-end: articolele sunt ambalate spre sfârșitul direcției flex.
start: articolele sunt ambalate spre începutul writing-modedirecției.
end: articolele sunt ambalate spre sfârșitul writing-modedirecției.
left: Elementele sunt ambalate spre marginea din stânga a containerului, cu excepția cazului în care nu are nici un sens cu flex-direction, atunci se comportă ca start.
right: Elementele sunt ambalate spre marginea din dreapta a containerului, cu excepția cazului în care nu are nici un sens cu flex-direction, atunci se comportă ca end.
center: elementele sunt centrate de-a lungul liniei
space-between: articolele sunt distribuite uniform în linie; primul element este pe linia de început, ultimul element pe linia de sfârșit
space-around: articolele sunt distribuite uniform în linie cu spațiu egal în jurul lor. Rețineți că vizual spațiile nu sunt egale, deoarece toate articolele au spațiu egal pe ambele părți. Primul articol va avea o unitate de spațiu pe marginea containerului, dar două unități de spațiu între articolul următor, deoarece articolul următor are spațiul propriu care se aplică.
space-evenly: articolele sunt distribuite astfel încât distanța dintre oricare două elemente (și spațiul până la margini) să fie egală.

Rețineți că suportul browserului pentru aceste valori este nuanțat. De exemplu, space-betweennu am primit niciodată asistență de la unele versiuni ale Edge, iar start / end / left / right nu sunt încă în Chrome. MDN are diagrame detaliate. Cele mai sigure valori sunt flex-start, flex-endși center.

Există, de asemenea, două cuvinte cheie suplimentare pe care le puteți asocia cu aceste valori: safeși unsafe. Utilizarea safevă asigură că, cu toate acestea, faceți acest tip de poziționare, nu puteți împinge un element astfel încât acesta să fie redat în afara ecranului (de exemplu, în partea de sus), astfel încât conținutul să nu poată fi derulat și el (numit „pierdere de date”) .

alinia-elemente

Aceasta definește comportamentul implicit pentru modul în care elementele flexibile sunt așezate de-a lungul axei transversale pe linia curentă. Gândiți-vă la aceasta ca la justify-contentversiunea pentru axa transversală (perpendiculară pe axa principală).

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

stretch (implicit): întindeți pentru a umple recipientul (respectați totuși lățimea min / lățimea maximă)
flex-start/ start/ self-start: articolele sunt plasate la începutul axei transversale. Diferența dintre acestea este subtilă și se referă la respectarea flex-directionregulilor sau a writing-moderegulilor.
flex-end/ end/ self-end: articolele sunt plasate la capătul axei transversale. Din nou, diferența este subtilă și se referă la respectarea flex-directionregulilor vs. writing-modereguli.
center: elementele sunt centrate pe axa transversală
baseline: elementele sunt aliniate, cum ar fi alinierea liniilor de bază

safeȘi unsafecuvinte cheie modificator poate fi utilizat împreună cu tot restul acestor cuvinte cheie (deși suport browser - ul nota), și să se ocupe cu ajutându - vă să prevină elemente de aliniere , astfel încât conținutul devine inaccesibil.

align-content

Aceasta aliniază liniile unui container flexibil în interior când există spațiu suplimentar pe axa transversală, similar cu modul în care justify-contentaliniază elementele individuale din axa principală.

Notă: Această proprietate intră în vigoare numai pentru containerele flexibile cu mai multe linii, unde flex-floweste setat la oricare wrapsau wrap-reverse). Un container flexibil cu o singură linie (adică unde flex-floweste setat la valoarea implicită no-wrap) nu se va reflecta 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 (implicit): articolele sunt ambalate în poziția lor implicită ca și cum nu ar fi setată nicio valoare.
flex-start/ start: articole ambalate până la începutul containerului. Cei (mai susținuți) flex-startonorează în flex-directiontimp ce startonorează writing-modedirecția.
flex-end/ end: articole ambalate până la capătul containerului. (Mai mult sprijin) flex-endonorează în flex-directiontimp ce sfârșitul onorează writing-modedirecția.
center: articole centrate în container
space-between: articole distribuite uniform; prima linie este la începutul containerului, în timp ce ultima este la sfârșit
space-around: elemente distribuite uniform cu spațiu egal în jurul fiecărei linii
space-evenly: articolele sunt distribuite uniform cu spațiu egal în jurul lor
stretch: liniile se întind pentru a ocupa spațiul rămas

Proprietăți pentru copii
(articole flexibile)

Ordin

În mod implicit, articolele flex sunt dispuse în ordinea sursă. Cu toate acestea, orderproprietatea controlează ordinea în care apar în containerul flex.

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

flex-cresc

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.

Suport pentru browser

Despărțit de „versiunea” flexbox:

(nou) înseamnă sintaxa recentă din specificație (de exemplu display: flex;)
(tweener) înseamnă o sintaxă neoficială ciudată din 2011 (de exemplu display: flexbox;)
(vechi) înseamnă sintaxa veche din 2009 (de exemplu display: box;)

Crom	Safari	Firefox	Operă	IE	Margine	Android	iOS
20- (vechi) 21+ (nou)	3.1+ (vechi) 6.1+ (nou)	2-21 (vechi) 22+ (nou)	12.1+ (nou)	10 (tweener) 11+ (nou)	17+ (nou)	2.1+ (vechi) 4.4+ (nou)	3.2+ (vechi) 7.1+ (nou)

Browserul Blackberry 10+ acceptă noua sintaxă.