Siehe CSS - Flexbox: Unterschied zwischen den Versionen
| Zeile 107: | Zeile 107: | ||
== Beispiele == | == Beispiele == | ||
=== Fotogrid === | === Fotogrid === | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Version vom 7. August 2018, 22:47 Uhr
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:
Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Properties
flex-direction flex-wrap flex-flow justify-content align-items align-content
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.
<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>
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:
<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>
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:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div>
The flex-basis property specifies the initial length of a flex item.
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties
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
<!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>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<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>
