|
|
| Zeile 1: |
Zeile 1: |
| | Siehe [[CSS - Flexbox]] | | Siehe [[CSS - Flexbox]] |
| − | == 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="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>
| |
| − |
| |
| − | === Homepage Layout ===
| |
| − | <syntaxhighlight lang="html5">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Page Title</title>
| |
| − | <meta charset="UTF-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <style>
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | /* Style the body */
| |
| − | body {
| |
| − | font-family: Arial;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | /* Header/logo Title */
| |
| − | .header {
| |
| − | padding: 60px;
| |
| − | text-align: center;
| |
| − | background: #1abc9c;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | /* Style the top navigation bar */
| |
| − | .navbar {
| |
| − | display: flex;
| |
| − | background-color: #333;
| |
| − | }
| |
| − |
| |
| − | /* Style the navigation bar links */
| |
| − | .navbar a {
| |
| − | color: white;
| |
| − | padding: 14px 20px;
| |
| − | text-decoration: none;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /* Change color on hover */
| |
| − | .navbar a:hover {
| |
| − | background-color: #ddd;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | /* Column container */
| |
| − | .row {
| |
| − | display: flex;
| |
| − | flex-wrap: wrap;
| |
| − | }
| |
| − |
| |
| − | /* Create two unequal columns that sits next to each other */
| |
| − | /* Sidebar/left column */
| |
| − | .side {
| |
| − | flex: 30%;
| |
| − | background-color: #f1f1f1;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Main column */
| |
| − | .main {
| |
| − | flex: 70%;
| |
| − | background-color: white;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Fake image, just for this example */
| |
| − | .fakeimg {
| |
| − | background-color: #aaa;
| |
| − | width: 100%;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Footer */
| |
| − | .footer {
| |
| − | padding: 20px;
| |
| − | text-align: center;
| |
| − | background: #ddd;
| |
| − | }
| |
| − |
| |
| − | /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
| |
| − | @media screen and (max-width: 700px) {
| |
| − | .row, .navbar {
| |
| − | flex-direction: column;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <!-- Note -->
| |
| − | <div style="background:yellow;padding:5px">
| |
| − | <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Header -->
| |
| − | <div class="header">
| |
| − | <h1>My Website</h1>
| |
| − | <p>With a <b>flexible</b> layout.</p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Navigation Bar -->
| |
| − | <div class="navbar">
| |
| − | <a href="#">Link</a>
| |
| − | <a href="#">Link</a>
| |
| − | <a href="#">Link</a>
| |
| − | <a href="#">Link</a>
| |
| − | </div>
| |
| − |
| |
| − | <!-- The flexible grid (content) -->
| |
| − | <div class="row">
| |
| − | <div class="side">
| |
| − | <h2>About Me</h2>
| |
| − | <h5>Photo of me:</h5>
| |
| − | <div class="fakeimg" style="height:200px;">Image</div>
| |
| − | <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
| |
| − | <h3>More Text</h3>
| |
| − | <p>Lorem ipsum dolor sit ame.</p>
| |
| − | <div class="fakeimg" style="height:60px;">Image</div><br>
| |
| − | <div class="fakeimg" style="height:60px;">Image</div><br>
| |
| − | <div class="fakeimg" style="height:60px;">Image</div>
| |
| − | </div>
| |
| − | <div class="main">
| |
| − | <h2>TITLE HEADING</h2>
| |
| − | <h5>Title description, Dec 7, 2017</h5>
| |
| − | <div class="fakeimg" style="height:200px;">Image</div>
| |
| − | <p>Some text..</p>
| |
| − | <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
| |
| − | <br>
| |
| − | <h2>TITLE HEADING</h2>
| |
| − | <h5>Title description, Sep 2, 2017</h5>
| |
| − | <div class="fakeimg" style="height:200px;">Image</div>
| |
| − | <p>Some text..</p>
| |
| − | <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Footer -->
| |
| − | <div class="footer">
| |
| − | <h2>Footer</h2>
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
