To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

Flexbox to nowa technologia ale ma raczej szerokie wsparcie wśród przeglądarek, dlatego jego używanie staje się coraz bardziej powszechne. Flexbox wykorzystuje narzędzia, które pozwalają na szybkie tworzenie kompleksowego i eastycznego układu strony. W tym artykule zawarto wszystkie podstawowe informacje na ten temat.

Wymogi: podstawy HTML (zajrzyj do Introduction to HTML) oraz znajomość zasad funkcjonowania CSS ( więcej na ten temat znajdziesz tu Introduction to CSS.)
Cel: Nauczenie się jak używać Flexboxa do tworzenia kreatywnego układu strony.

Dlaczego Flexbox?

Przez długi czas  jedynymi rzeczowymi narzędziami działającymi w przeglądarkach, do tworzenia układu strony w CSS były właściwości: float i position. Są dobre i działają, ale w niektórych przypadkach mogą być ograniczające i frustrujące.

Poniższe wymagania dotyczące układu są trudne lub niemożliwe do osiągnięcia dzięki wcześniej wspomnianym narzędziom

  • pionowe wycentrowanie blokowego elementu z zawartością, względem rodzica.
  • sprawienie by wszystkie dzieci w pojemniku zajęły taką samą ilość dostępnej szerokośći/wysokości, bez względu na to jaka szerokość/wysokość jest dostępna
  • umieszczenie kolumn o takiej samej wysokości w wielokolumnowym układzie nawet jeśli zawierają inną licznę znaków

Jak zauważysz w kolejnych sekcjach, flexbox ułatwia tworzenie układów strony. Zabawmy się!

Wprowadzenie i prosty przykład

W tym artykule będziemy zachęcać cię do pracy poprzez serię ćwiczeń, które ułatwią ci zrozumienie jak działa flexbox. Ąby zacząć musisz zrobić kopię pliku startowego— flexbox0.html z naszego repozytorium w gitHubie — załadować w przeglądarce ( Firefox albo Chrome), i spojrzeć na kod w twoim edytorze kodu. Możesz kakże podejrzeć kod na żywo - see it live here .

Zauważ że mamy <header> element z nagłówkiem w środku oraz oraz <section> zawierający trzy  <article>. Użyjemy tego do stworzenia dość standardowego układy trzy-kolumnowego.

Określanie, które elementy układu wykorzystać jako elastyczne pudełka.

Aby zacząć musimy wybrać elementy, które mają zmienić położenie. Żeby to zrobić, ustawiamy specjalną wartość "display" na rodzicu elementu, na który chcemy oddziaływać.  W tym przypadku musimy poukładać elementy "article", więc display ustawiamy na "section" (section staje się contenerem dla trzech bloków "article").

section {
  display: flex;
}

Rezultatem tego powinno być takie coś:

Pojedyncza deklaracja daje nam wszystko czego potrzebujemy — niewiarygodne, co nie? Mamy nasz układ koumn z kilkoma kolumnami o jednakowych rozmiarach i mających tą samą wysokość. Dzieje się tak dlatego że domyśle wartości ustawione są w taki sposób żeby rowiązywać problem nierównych kolumn. Więcej o tym później.

Zanotuj: Możesz także ustawić display o wartości inline-flex jeśli życzysz sobie ułożenia liniowych elementó jako blokowe.

Aside 

Elementy blokowe w modelu flex box układają się względem dwóch osi.

flex_terms.png

  • Główna oś biegnie w kierunku, w którym układane są elementy blokowe (na przykład jako rzędy wszerz strony lub kolumny wzduż). Początek i koniec tej osi nazywane są main start i main end.
  • Oś poprzeczna jest osią biegnącą prostopadle do kierunku układu elementów.Początek i koniec osi są nazywane cross start i cross end.
  • Rodzic ma ustawioną wartość display:flex czyli <section> w naszym przykładzie) i jest nazywany kontenerem - flex container.
  • Eementy poukładane jako elastyczne w kontenerze są nazywane flex items<article> elementy w naszym przykładzie.

Pamiętaj o tej terminologii podczas następujących sekcji. Zawsze możesz tu wrócić jeśli zagubisz się w jakimś używanym tutaj terminie.

Kolumny czy wiersze?

Flexbox wprowadza wartość nazywanąflex-direction która określa w którym kierunku main axis - oś główna biegnie (w jakim kierunku układają się dzieci typu flexbox) - domyślnie ustawiona jest wartość row, co powoduje żę elementy układają się w wierszu w kierunku, w którym działa domyśny język przegądarki (z lewej do prawej w przypadku Angielskich przegądarek) 

Spróbuj dodać następującą deklarację do pliku css.

flex-direction: column;

 

 

Jak widzisz  elementy ponownie ułożyły się kolumnowow tak jak przed dodaniem jakiegokolwiek css. Zanim zaczniemy dalej usuń tą deklarację ze swojego przykładu.

Zanotuj: Możesz również ułożyć elementy w odwrotnym kierunku używając wartośći row-reverse and column-reverse. Poeksperymentuj także z tymi właściwościami!

Zawijanie

 

Jednym z problemów który się pojawia się kiedy umieszczasz dużą liczbę elementów różnej szerokości i wysokości  mogą one zacząć się wylewać z elementu rodzica niszcząc układ strony.

Zajrzyjmy do przykłady  flexbox-wrap0.html, i wyprobujmy viewing it live (zrób kopię pliku jeśli chcesz podążać za tym przykładem):

Widzimy tutaj żze elementy potomne rzeczywiście się wylewają poza rodzica.Jednym ze sposobów który umożliwia umiejscowienie tych elementów jest następująca deklaracja :

flex-wrap: wrap;

Przetestuj to teraz; jak widzisz układ strony wygląda lepiej w tym zestawieniu.

Teraz musimy powielić wiersze - w każdym wierszu mieści się sensowna liczba elementów potomnych, a wszystkie przepełnienia przenoszą się do kolejnego wiersza. Deklaracja flex: 200px ustawia właściwość dla każdego elementu "articles", która mówi że szerokość ma wynosić co najmniej 200px; wrócimy do tego trochę później. Jak mogłeś zauważyć ostatnie kilka dzieci w ostatnim wierszu są trochę szersze, więc cały wiersz jest wypeniony.

Ale jest jeszcze coś co możemy zrobić. Po pierwsze, spróbuj zmienic twój flex-direction na wartość row-reverse - teraz jak widzisz masz nadal wielowierszowy układ strony, ale zacztnający się od przeciwnego rogu okna przegądarki i płynie w przeciwnym kierunku.

 

flex-flow w skrócie

W tym punkcie dobrze zauważyć że istnieje skrót  flex-direction and flex-wrapflex-flow. Na przykład możesz zamienić to:

flex-direction: row;
flex-wrap: wrap;

na to:

flex-flow: row wrap;

Elastyczne wymiarowanie elementów flex

Wróćmy teraz do naszego pierwszego przykładu, spójrzmy jak możemy kontrolować jaką przestrzeń zajmują elementy. Uruchom kopię flexbox0.html, albo zrób kopię z pliku flexbox1.html jako nowy punkt startowy (see it live).

Po pierwsze dodaj nastęującą regułę na dole twojego pliku CSS:

article {
  flex: 1;
}

 

 

Jest to niepodzielna wartość procentowa określająca jaką część dostęnej przestrzeni wzdłuż głównej osi będzie zajmować każdy element elastyczny. W tym przypadku nadajemy każdemu elementowi  <article> wartość 1, co znaczy że wszytskie zajmują tyle samo wolnego miejsca, ile pozostało po ustawieniu dopełnienia i marginesu. Jest to proporcja co oznacza żę nadanie każdemu elementowi wartośći 400000 dałoby dokładnie ten sam efekt.

 

Teraz dodaj następującą zasadę poniżej poprzedniej.

article:nth-of-type(3) {
  flex: 2;
}

Teraz kiedy odświeżysz zauważysz że trzeci element <article> zajmuje dwa razy tyle szerokości co pozostałe dwa—w sumie dostęne są cztery jednostki procentowe. Pierwsze dwa elementy mają po jeden każdy więc zajmują 1/4 dostępnej przestrzeni każdy. Trzeci ma dwie jednostki, więc zajmuje 2/4 dostęnej przestrzeni (or 1/2).

MOżesz takżę ustawić minimana wartość rozmiaru wewnątrz wartości flex. Spróbuj zaktualizować twój przykład nazstępującymi zasadami.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

To w zasadzie stwierdza "Każdy element najpierw będzie otrzymywał 200px dostępnej przetrzeni. Potem reszta dostępnej przzestrzeni będzie dzielona według wartości procentowych."Spróbuj odświeżyć i zobaczysz różnicę w tym jaka przestrzeń jest dzielona przez elementy. 

 

Prawdziwa wawrtość flexbox można zauważyć w flexibility/responsiveness — jeśi zmienisz rozmiar okna przeglądarki i dodasz <article> element, rozkład strony nadal będzie prawidłowo działał.

flex: shorthand versus longhand

flex to wartość skrótowa, którą możesz opisać trzy różne wartośći:

  • The unitless proportion value we discussed above. This can be specified individually using the flex-grow longhand property.
  • A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.
  • The minimum size value we discussed above. This can be specified individually using the flex-basis longhand value.

We'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). They lead to a lot of extra code being written, and they can be somewhat confusing.

Horizontal and vertical alignment

You can also use flexbox features to align flex items along the main or cross axes. Let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar. At the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.

First, take a local copy of this example.

Now, add the following to the bottom of the example's CSS:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. We've done this via two new properties.

align-items controls where the flex items sit on the cross axis.

  • By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. This is how our first example got equal height columns by default.
  • The center value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.
  • You can also have values like flex-start and flex-end, which will align all items at the start and end of the cross axis respectively. See align-items for the full details.

You can override the align-items behavior for individual flex items by applying the align-self property to them. For example, try adding the following to your CSS:

button:first-child {
  align-self: flex-end;
}

Have a look at what effect this has, and remove it again when you've finished.

justify-content controls where the flex items sit on the main axis.

  • The default value is flex-start, which makes all the items sit at the start of the main axis.
  • You can use flex-end to make them sit at the end.
  • center is also a value for justify-content, and will make the flex items sit in the center of the main axis.
  • The value we've used above, space-around, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end.
  • There is another value, space-between, which is very similar to space-around except that it doesn't leave any space at either end.

We'd like to encourage you to play with these values to see how they work before you continue.

Ordering flex items

Flexbox also has a feature for changing the layout order of flex items, without affecting the source order. This is another thing that is impossible to do with traditional layout methods.

The code for this is simple: try adding the following CSS to your button bar example code:

button:first-child {
  order: 1;
}

Refresh, and you'll now see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:

  • By default, all flex items have an order value of 0.
  • Flex items with higher order values set on them will appear later in the display order than items with lower order values.
  • Flex items with the same order value will appear in their source order. So if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.
  • The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.

You can set negative order values to make items appear earlier than items with 0 set. For example, you could make the "Blush" button appear at the start of the main axis using the following rule:

button:last-child {
  order: -1;
}

Nested flex boxes

It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes. Have a look at complex-flexbox.html (see it live also).

The HTML for this is fairly simple. We've got a <section> element containing three <article>s. The third <article> contains three <div>s. :

section - article
          article
          article - div - button   
                    div   button
                    div   button
                          button
                          button

Let's look at the code we've used for the layout.

First of all, we set the children of the <section> to be laid out as flexible boxes.

section {
  display: flex;
}

Next, we set some flex values on the <article>s themselves. Take special note of the 2nd rule here — we are setting the third <article> to have its children laid out like flex items too, but this time we are laying them out like a column.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Next, we select the first <div>. We first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <button> elements) to also be laid out like flex items. Here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier.

article:nth-of-type(3) div:first-child {
  flex:1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Finally, we set some sizing on the button, but more interestingly we give it a flex value of 1. This has a very interesting effect, which you'll see if you try resizing your browser window width. The buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.

button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Cross browser compatibility

Flexbox support is available in most new browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS, etc. However you should be aware that there are still older browsers in use that don't support Flexbox (or do, but support a really old, out-of-date version of it.)

While you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.

Flexbox is a bit trickier than some CSS features. For example, if a browser is missing a CSS drop shadow, then the site will likely still be usable. Not supporting flexbox features however will probably break a layout completely, making it unusable.

We'll discuss strategies for overcoming tricky cross browser support issues in a future module.

Podsumowanie

Tu kończy się nasza krótka wycieczka po flexboxiee. Mamy nadzieję że dobrze się bawieś i będziesz się dobrze bawił robiąc postępy w nauce.

W dalszych artykułach przyjrzymy się innnemu ważnemu aspektowi układu strony w CSS - grid system (układ siatkowy)

Autorzy i etykiety dokumentu

Autorzy tej strony: kkinnga1
Ostatnia aktualizacja: kkinnga1,