Sie werden sehen, dass wir ein {{htmlelement ("header")}} Element mit einer Überschrift der obersten Ebene und ein {{htmlelement ("section")}} Element mit drei {{htmlelement ("article") }} haben. Wir werden damit ein standardmäßiges dreispaltiges Layout erstellen.
-
Dies führt dazu, dass das <section> -Element zu einem Flex-Container wird und seine untergeordneten Elemente zu Flex-Elementen werden. Das Ergebnis sollte ungefähr so sein:
-
Diese Deklaration erzeugt alles, was wir brauchen - unglaublich, oder? Wir haben unser mehrspaltiges Layout mit gleich großen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt an de Standardwerte für Flex-Elemente (die untergeordneten Elemente des Flex-Containers), die so eingerichtet sind, um solche häufig auftretenden Probleme wie dieses zu lösen.
@@ -75,7 +75,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxWenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:
-
Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder möglicherweise ihren Container überlaufen und das Layout beschädigen. Schauen Sie sich unser Beispiel flexbox-wrap0.html an und versuchen Sie, es live anzuzeigen (erstellen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):
-
Hier sehen wir die Kind-Elemente tatsächlich aus ihrem Container laufen. Eine Möglichkeit, dies zu beheben, besteht darin, Ihrer {{htmlelement ("section")}} -Regel die folgende Deklaration hinzuzufügen:
@@ -116,7 +116,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxSie werden sehen, dass das Layout damit viel besser aussieht:
-
Wir haben jetzt mehrere Zeilen - so viele Flexbox-Kinder werden in jede Zeile eingefügt, wie sinnvoll ist, und jeder Überlauf wird in die nächste Zeile verschoben. Die auf den Artikeln festgelegte flex: 200px-Deklaration bedeutet, dass jede mindestens 200px breit ist. Wir werden diese Eigenschaft später genauer besprechen. Möglicherweise stellen Sie auch fest, dass die letzten untergeordneten Elemente in der letzten Zeile jeweils breiter sind, sodass die gesamte Zeile noch gefüllt ist.
Das heißt im Wesentlichen: "Jedes Flex-Element erhält zuerst 200 Pixel des verfügbaren Speicherplatzes. Danach wird der Rest des verfügbaren Speicherplatzes entsprechend den Proportionseinheiten aufgeteilt." Versuchen Sie es mit einer Aktualisierung, und Sie werden einen Unterschied in der Aufteilung des Speicherplatzes feststellen.
-
Der wahre Wert von flexbox zeigt sich in seiner Flexibilität / Responsiveness. Wenn Sie die Größe des Browserfensters ändern oder ein weiteres {{htmlelement ("article")}} Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.
@@ -185,19 +185,19 @@ article:nth-of-type(3) {Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Schauen wir uns dies anhand eines neuen Beispiels an - flex-align0.html (siehe auch live) - das wir in eine übersichtliche, flexible Schaltfläche / Symbolleiste verwandeln werden. Im Moment sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen in der oberen linken Ecke.
-
Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.
Fügen Sie nun am Ende des CSS des Beispiels Folgendes hinzu:
-div {
+div {
display: flex;
align-items: center;
justify-content: space-around;
}
-
+
Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt horizontal und vertikal gut zentriert sind. Wir haben dies über zwei neue Eigenschaften getan.
@@ -215,7 +215,7 @@ article:nth-of-type(3) {
align-self: flex-end;
}
-
Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie ihn erneut, wenn Sie fertig sind.
@@ -260,7 +260,7 @@ article:nth-of-type(3) {Mit der Flexbox können einige recht komplexe Layouts erstellt werden. Es ist vollkommen in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, damit seine untergeordneten Elemente auch wie flexible Boxen angeordnet sind. Schauen Sie sich complex-flexbox.html an (Live-Ansicht).
-
Das HTML dafür ist ziemlich einfach. Wir haben ein {{htmlelement ("section")}} Element, das drei {{htmlelement ("article")}} enthält. Das dritte {{htmlelement ("article")}} enthält drei {{htmlelement ("div")}}. ::
diff --git a/files/es/learn/css/css_layout/flexbox/index.html b/files/es/learn/css/css_layout/flexbox/index.html index 4bfde0827c..56eeff62d0 100644 --- a/files/es/learn/css/css_layout/flexbox/index.html +++ b/files/es/learn/css/css_layout/flexbox/index.html @@ -42,7 +42,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxVerás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.
-
Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. El resultado de esto debería ser algo así:
Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.
@@ -66,7 +66,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxCuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:
-
Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo flexbox-wrap0.html e intenta verlo en vivo (toma una copia local de este archivo si deseas seguir este ejemplo):
-
Aquí vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:
@@ -107,7 +107,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxPruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:
- Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.
Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.
Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a row-reverse; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.
Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.
-
El valor real del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.
@@ -174,7 +174,7 @@ article:nth-of-type(3) {También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: flex-align0.html (consúltalo en vivo), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.
-
Primero, toma una copia local de este ejemplo.
@@ -245,7 +245,7 @@ article:nth-of-type(3) {Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (consúltalo en vivo).
-
El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:
diff --git a/files/ja/learn/css/css_layout/flexbox/index.html b/files/ja/learn/css/css_layout/flexbox/index.html index 71f7adbb0f..d8c09addb4 100644 --- a/files/ja/learn/css/css_layout/flexbox/index.html +++ b/files/ja/learn/css/css_layout/flexbox/index.html @@ -54,7 +54,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox内部に最上位の見出しを持つ {{htmlelement("header")}} 要素と、3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 これらを使用して、かなり標準的な3列のレイアウトを作成します。
-
この結果は次のようになります。
-
それで、このたった一つの宣言が必要なものすべてを与えてくれます — 信じられないでしょ？ 同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。 これは、フレックス項目（フレックスコンテナの子）に与えられるデフォルト値が、このような一般的な問題を解決するために設定されているためです。 それらについての詳細は後で。
@@ -78,7 +78,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox要素が柔軟な箱として配置されるとき、それらは次のように2つの軸に沿って配置されます。
-
レイアウトの幅や高さが決まっているときに発生する問題の1つは、最終的にはフレックスボックスの子がコンテナをオーバーフローさせてレイアウトが壊れることです。 flexbox-wrap0.html の例を見て、それをライブで見てみてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。
-
ここで実際に子がコンテナから抜け出しているのを見ます。 これを修正できる1つの方法は、{{htmlelement("section")}}）の規則に次の宣言を追加することです。
@@ -119,7 +119,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox試してみてください。 これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。
-現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 article に設定した flex: 200px の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。
現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 article に設定した flex: 200px の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。
しかし、ここでできることは他にもあります。 まず最初に、{{cssxref("flex-direction")}} プロパティの値を row-reverse に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。
これは基本的に「各フレックス項目には最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 リフレッシュしてみると、スペースの共有方法に違いが見られます。
-
フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます — ブラウザーウィンドウのサイズを変更したり、別の {{htmlelement("article")}} 要素を追加したりしても、レイアウトは問題なく機能します。
@@ -186,7 +186,7 @@ article:nth-of-type(3) {フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックス項目を整列させることもできます。 新しい例である flex-align0.html を見て（ライブも見る）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。
-
まず、この例のローカルコピーを取ります。
@@ -257,7 +257,7 @@ article:nth-of-type(3) {フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックス項目をフレックスコンテナとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 complex-flexbox.html を見てください（ライブも見る）。
-
このための HTML はかなり単純です。 3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3番目の {{htmlelement("article")}} には3つの {{htmlelement("div")}} が含まれています。
diff --git a/files/ko/learn/css/css_layout/flexbox/index.html b/files/ko/learn/css/css_layout/flexbox/index.html index 72f5d57cf8..65b83289d7 100644 --- a/files/ko/learn/css/css_layout/flexbox/index.html +++ b/files/ko/learn/css/css_layout/flexbox/index.html @@ -49,7 +49,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox(편집기로 본) 소스안에 최상위 수준에 {{htmlelement("header")}} 요소와 세 개의 {{htmlelement("article")}}를 포함한 {{htmlelement("section")}} 요소가 있음을 알 수 있습니다. 우리는 이것들을 사용해 상당히 표준적인 삼단 레이아웃을 생성할 겁니다.
-
그 결과는 다음과 같아야 합니다:
-
자. 이 단일 선언이 우리에게 필요한 모든 것을 제공합니다. 놀랍죠, 그쵸? 우리는 단의 크기가 동일한 다단 레이아웃를 갖게 되었고, 단의 높이가 모두 같습니다. 이렇게 된 까닭은 (flex container의 자식인) flex item에 주어진 기본값이 이와 같은 일반적인 문제를 해결하도록 설정되었기 때문입니다. 관련 내용은 나중에 추가합니다.
@@ -73,7 +73,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
-
당신의 레이아웃에 너비 또는 높이가 고정 크기를 갖고 있어 생기는 한 가지 문제는 결국 flexbox 자식 요소가 컨테이너에서 대열이탈하면서 레이아웃이 깨진다는 것입니다. 우리가 제시하는 flexbox-wrap0.html 예제를 확인하고 난 뒤 라이브 보기를 시도하세요(이 예제를 따라해보고 싶다면 이제 이 파일의 사본을 내려받으세요):
-
여기서 우리는 자식들이 정말로 소속 컨테이너에서 이탈하는 모습을 확인할 수 있습니다. 이것을 해소할 수 있는 한 가지 방법은 다음 선언을 {{htmlelement("section")}} 규칙 부분에 추가하면 됩니다:
@@ -114,7 +114,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox지금 시도해보십시오. 동 규칙이 포함된 상태에선 레이아웃 모양이 개선되는 걸 보게 됩겁니다:
-우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 flex: 200px 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.
우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 flex: 200px 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.
하지만 할 수 있는 게 더 있습니다. 우선, {{cssxref("flex-direction")}} 속성값을 row-reverse로 변경해 보십시오. 이제 여러 행 레이아웃을 보유한 것은 마찬가지지만, 브라우저 창의 반대쪽 구석에서 시작하여 역방향 대열이 된 것이 확인될 겁니다.
이것은 기본적으로 "각 flex item은 먼저 사용 가능한 공간에서 200px를 부여받습니다. 그 후, 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다." 새로 고침을 해보면 공간 배분 방식이 달라진 것이 확인될 겁니다.
-
flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시말해 브라우저 창의 크기를 재조정하거나 다른 {{htmlelement("article")}} 요소를 추가하더라도 레이아웃이 계속 정상적으로 작동합니다.
@@ -181,7 +181,7 @@ article:nth-of-type(3) {또한 flexbox 기능을 사용하여 기본 축 또는 교차축을 따라 flex item을 정렬할수 있습니다. 이 기능은 새로운 예제인 flex-align0.html을 통해 살펴보자(라이브로도 보세요). flexbox가 우리는 깔끔한 flex형 단추/툴바로 바뀌게될 겁니다. 지금 당장은 몇몇 단추들이 왼쪽 상단 모서리에 몰린 상태의 수평 메뉴 표시줄이 보입니다.
-
우선 이 예제의 사본을 취득합니다.
@@ -252,7 +252,7 @@ article:nth-of-type(3) {flexbox를 사용하여 꽤 복잡한 레이아웃을 만들 수 있습니다. flex item을 flex container로 설정해도 전혀 문제없습니다. 그렇게 되면 그 컨테이너의 자녀가 flexbox처럼 배치됩니다. complex-flexbox.html를 찾아보세요. (라이브로도 보세요).
-
이를 위한 HTML은 상당히 간단합니다. 세 개의 {{htmlelement("article")}}를 포함하는 {{htmlelement("section")}} 요소가 있습니다. 세 번째 {{htmlelement("article")}}은 세 개의 {{htmlelement("div")}}를 포함하고 있습니다. :
diff --git a/files/pl/learn/css/css_layout/flexbox/index.html b/files/pl/learn/css/css_layout/flexbox/index.html index 1a06738b54..b2ef1a7724 100644 --- a/files/pl/learn/css/css_layout/flexbox/index.html +++ b/files/pl/learn/css/css_layout/flexbox/index.html @@ -53,7 +53,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxZauważ, że mamy element {{htmlelement("header")}} z nagłówkiem w środku oraz {{htmlelement("section")}} zawierający trzy {{htmlelement("article")}}. Użyjemy tego do stworzenia dość standardowego układu trzy-kolumnowego.
-
Rezultatem tego powinno być takie coś:
-
Pojedyncza deklaracja daje nam wszystko czego potrzebujemy — niewiarygodne, co nie? Mamy nasz układ kolumn z kilkoma kolumnami o jednakowych rozmiarach i mających tą samą wysokość. Dzieje się tak dlatego że domyślne wartości ustawione są w taki sposób żeby rowiązywać problem nierównych kolumn. Więcej o tym później.
@@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxElementy blokowe w modelu flex box układają się względem dwóch osi:
-
Zajrzyjmy do przykłady flexbox-wrap0.html, i wypróbujmy viewing it live (zrób kopię pliku jeśli chcesz podążać za tym przykładem):
-
Widzimy tutaj że 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 :
@@ -116,7 +116,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxPrzetestuj 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 wypełniony.
To w zasadzie stwierdza "Każdy element najpierw będzie otrzymywał 200px dostępnej przetrzeni. Potem reszta dostępnej przestrzeni 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.
-
Prawdziwą wartość flexbox można zauważyć w flexibility/responsiveness — jeśli zmienisz rozmiar okna przeglądarki i dodasz {{htmlelement("article")}} element, układ strony nadal będzie działał prawidłowo.
@@ -185,7 +185,7 @@ article:nth-of-type(3) {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.
@@ -256,7 +256,7 @@ article:nth-of-type(3) {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 {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. The third {{htmlelement("article")}} contains three {{htmlelement("div")}}s. :
diff --git a/files/pt-br/learn/css/css_layout/flexbox/index.html b/files/pt-br/learn/css/css_layout/flexbox/index.html index 26e3d7c683..a6e8b16e49 100644 --- a/files/pt-br/learn/css/css_layout/flexbox/index.html +++ b/files/pt-br/learn/css/css_layout/flexbox/index.html @@ -55,7 +55,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxVocê verá que temos um elemento {{HTMLElement("header")}} com um cabeçalho no nível superior dentro dele, e um elemento {{HTMLElement("section")}} contendo três {{HTMLElement("article")}}s. Nós vamos usá-los para criar um layout padrão de três colunas.
-
O resultado disso deve ser algo assim:
-
Então, esta única declaração nos dá tudo que precisamos — incrivel, certo? Nós temos um layout de múltiplas com tamanhos iguais, e todas as colunas tem a mesma altura. Isto porque o valor padrão dado aos flex items (os filhos do flex container) são configurados para resolver problemas comuns, como este. Voltaremos a este assunto depois.
@@ -79,7 +79,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxQuando os elementos são definidos como flexibles boxes, eles são dispostos ao longo de dois eixos:
-
Um problema que aparece quando você tem uma quantidade fixa de elementos com a mesma largura e altura no seu esquema é que eventualmente seus elementos filhos flexbox irão sobrepor seu elemento pai (container), quebrando o laioute. Dê uma olhada no nosso exemplo flexbox-wrap0.html, e experimente visualizá-lo online (tenha uma cópia local desse arquivo no seu computador se você quiser continuar acompanhando os exemplos):
-
Aqui vemos que os filhos estão de fato saindo fora do elemento recipiente (container). Uma maneira de consertar isso é adicionando a seguinte declaração na seção de sua regra CSS:
@@ -116,7 +116,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxExperimente isso agora; você verá que o laioute parece muito melhor agora com essa regra:
-Agora temos várias linhas — tantos elementos filhos flexbox estão encaixados em cada linha quantos fazem sentido, e qualquer sobreposição é movida para a próxima linha. A declaração flex: 200px configurada nos elementos {{htmlelement("article")}} significa que cada um terá pelo menos 200 pixels de largura; discutiremos essa propriedade mais detalhadamente mais tarde. Você também deve notar que os últimos filhos na última linha estão mais largos para que a linha inteira possa ser preenchida.
Agora temos várias linhas — tantos elementos filhos flexbox estão encaixados em cada linha quantos fazem sentido, e qualquer sobreposição é movida para a próxima linha. A declaração flex: 200px configurada nos elementos {{htmlelement("article")}} significa que cada um terá pelo menos 200 pixels de largura; discutiremos essa propriedade mais detalhadamente mais tarde. Você também deve notar que os últimos filhos na última linha estão mais largos para que a linha inteira possa ser preenchida.
Mas ainda tem mais para fazermos com isso. Primeiro, experimente mudar sua propriedade {{cssxref("flex-direction")}} para o valor row-reverse — agora você verá que ainda tem um laioute com várias linhas, mas ele começa no canto oposto da janela do navegador e segue na direção reversa.
Isso basicamente diz o seguinte: "Para cada elemento flex primeiro será dado 200px do espaço disponível. Depois, o restante do espaço disponível será distribuído entre os elementos, de acordo com a unidade de proporção definida.". Atualize a página e você verá a diferença de como o espaço é distribuído.
-
O valor real de cada caixa flex pode ser visto pela sua flexibilidade/responsividade — se você redimensionar a janela do navegador, ou adicionar outro elemento {{HTMLElement("article")}}, o laioute continua funcionando sem quebrar.
@@ -183,7 +183,7 @@ article:nth-of-type(3) {Você também pode usar as funcionalidade do flexbox para alinhar elementos no eixo principal ou no eixo transversal (relembre esse assunto na seção Um aparte no modelo flex). Vamos explorar isso olhando para um outro exemplo — flex-align0.html (veja online) — o qual vamos transformá-lo num botão/barra de ferramentas bem feito e flexível. Neste momento você verá uma barra de menu horizontal, com alguns botões expremidos no canto superior esquerdo:
-
Primeiro, tenha uma cópia local desse exemplo.
@@ -258,7 +258,7 @@ article:nth-of-type(3) {É possível criar laioutes bem complexos com flexbox. É perfeitamente aceitável configurar um elemento flex para também ser um container, para que seus filhos também se comportem como caixas flex. Dê uma olhada em complex-flexbox.html (veja também online).
-
O HTML desse exemplo é relativamente simples. Temos um elemento {{HTMLElement("section")}} contendo três {{HTMLElement("article")}}. O terceiro desses {{HTMLElement("article")}} contém três elementos {{HTMLElement("div")}}:
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index b675a1ec01..523531379c 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -46,7 +46,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxВы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.
-
В результате у нас получится вот так:
-
Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.
@@ -68,7 +68,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxКогда элементы выложены как flex блоки, они располагаются вдоль двух осей:
-
Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его себе на компьютер, если хотите изучить этот пример):
-
Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:
@@ -105,7 +105,7 @@ translation_of: Learn/CSS/CSS_layout/FlexboxПопробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:
-
Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.
Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.
-
Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.
@@ -174,7 +174,7 @@ article:nth-of-type(3) {Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.
-
Сначала сделайте себе копию этого примера.
@@ -245,7 +245,7 @@ article:nth-of-type(3) {Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на complex-flexbox.html (см. вживую).
-
HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.
diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html index f0224db80d..92749e8ef4 100644 --- a/files/zh-cn/learn/css/css_layout/flexbox/index.html +++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html @@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox你可以看到这个页面有一个含有顶级标题的 {{htmlelement("header")}} 元素，和一个包含三个 {{htmlelement("article")}} 的 {{htmlelement("section")}} 元素。我们将使用这些来创建一个非常的标准三列布局，如下所示：
-
结果如下：
-
所以，就这样一个简单的声明就给了我们所需要的一切—非常不可思议，对吧？ 我们的多列布局具有大小相等的列，并且列的高度都是一样。 这是因为这样的 flex 项（flex容器的子项）的默认值是可以解决这些的常见问题的。 后面还有更多内容。
@@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox当元素表现为 flex 框时，它们沿着两个轴来布局：
-
当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。你可以看一下 弹性盒子-wrap0.html 示例（你也可以拷贝到本地），如下所示：
-
在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明添加到 section css 规则中：
@@ -118,7 +118,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox现在尝试一下吧；你会看到布局比原来好多了：
-现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。
现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。
但是这里我们可以做得更多。首先，改变 {{cssxref("flex-direction")}} 属性值为 row-reverse — 你会看到仍然有多行布局，但是每一行元素排列的方向和原来是相反的了。
这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。
-
弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器窗口的大小，或者增加一个 {{htmlelement("article")}} 元素，这时的布局仍旧是好的。
@@ -185,7 +185,7 @@ article:nth-of-type(3) {还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐。让我们一起看一下新例子 — flex-align0.html（在线浏览）— 我们将会有一个整洁，灵活的按钮/工具栏。 此时，你看到了一个水平菜单栏，其中一些按钮卡在左上角，就像下面这样：
-
首先，拷贝一份到本地。
@@ -256,7 +256,7 @@ article:nth-of-type(3) {弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。看一下 complex-弹性盒子.html（在线浏览）。
-
这个例子的 HTML 是相当简单的。我们用一个 {{htmlelement("section")}} 元素包含了三个 {{htmlelement("article")}}元素。第三个 {{htmlelement("article")}} 元素包含了三个 {{htmlelement("div")}}：
-- cgit v1.2.3-54-g00ecf