|
|
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| − | == Links ==
| + | Siehe [[CSS - Flexbox]] |
| − | 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="html5">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
