Siehe CSS - Flexbox - Versionsgeschichte

37.49.33.174: Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe CSS - Flexbox“

2018-08-16T21:32:03Z

Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe CSS - Flexbox“

Änderungen zeigen

37.49.33.174 am 16. August 2018 um 21:31 Uhr

2018-08-16T21:31:30Z

37.49.33.174: /* Beispiele */

2018-08-07T21:49:41Z

Beispiele

37.49.33.174: /* Fotogrid */

2018-08-07T21:47:09Z

Fotogrid

37.49.33.174: /* Beispiele */

2018-08-07T21:46:33Z

Beispiele

37.49.33.174: Die Seite wurde neu angelegt: „== Links == https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676 https://www.w3schools.com/css/css3_flexbox.as…“

2018-08-07T21:46:18Z

Die Seite wurde neu angelegt: „== Links == https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676 https://www.w3schools.com/css/css3_flexbox.as…“

Neue Seite

== Links ==
https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
https://www.w3schools.com/css/css3_flexbox.asp

== Einleitung ==
Before the Flexbox Layout module, there were four layout modes:

<pre>
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
</pre>
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
== Properties ==
<pre>
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
</pre>

The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.
column
row
column-reverse
row-reverse

The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.
wrap
nowrap
wrap-reverse

The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.
row wrap
...

The '''justify-content''' property is used to '''align''' the flex items:
center
flex-start
flex-end
space-around
space-between

The '''align-items''' property is used to '''align''' the flex items '''vertically'''
center
flex-start
flex-end
stretch
baseline

The '''align-content''' property is used to '''align the flex lines'''.
space-between
space-around
stretch
center
flex-start
flex-end

'''Child Elements (Items)'''

The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.

The '''order property''' specifies the order of the flex items.
<pre>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</pre>

The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.

Make the third flex item grow eight times faster than the other flex items:
<pre>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
</pre>

The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.
Do not let the third flex item shrink as much as the other flex items:
<pre>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
</pre>

The '''flex-basis''' property specifies the '''initial length''' of a flex item.
<div style="flex-basis: 200px">3</div>

The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties
<div style="flex: 0 0 200px">3</div>

The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.

The align-self property overrides the default alignment set by the container's align-items property.

== Beispiele ==
Fotogrid
<syntaxhighlight lang="CSS">
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>


<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>


<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>

</body>
</html>
</syntaxhighlight>

← Nächstältere Version		Version vom 16. August 2018, 21:31 Uhr
Zeile 1:		Zeile 1:
		+	Siehe [[CSS - Flexbox]]
	== Links ==		== Links ==
	https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676		https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676

@@ Zeile 203: / Zeile 203: @@
      <img src="/w3images/underwater.jpg" style="width:100%">
    </div>
 </div>

@@ Zeile 107: / Zeile 107: @@
 == Beispiele ==
 === Fotogrid ===
-<syntaxhighlight lang="CSS">
+<syntaxhighlight lang="html5">
 <!DOCTYPE html>
 <html>