CSS - Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Links

https://yoksel.github.io/flex-cheatsheet

https://www.mediaevent.de/css/display-flex.html
https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
https://www.w3schools.com/css/css3_flexbox.asp
https://www.youtube.com/watch?v=OAX4xm1BZM8

Quickstart

Unterschied Grid / Flex -> Ein Flex Container ist dafür gedacht die enthaltenen Items in einer Richtung (one dimensional) anzuordnen. Grid ist eher für mehrdimensionale Raster gedacht.

Schnelle Beispiele für den Einstieg

Items in einer Zeile

Flex Container

display: flex

Flex Items

.sidebar{
  width: 320px;
}
.content{
 flex-grow: 1;
}

Items mit gleichmäßiger Breite

Standardmäßig nehmen die Items z.B. in einer Zeile nur den Platz ein den sie brauchen. So kann man sie dazu bringen sich den verfügbaren Platz aufzuteilen.

Todo

/*Items*/
flex: 1

flex is a shorthand property name for setting three distinct Flexbox properties, the flex-grow , flex-shrink and flex-basis properties, in the order stated.

flex: 1 only has the value 1 set. This value is attributed to the flex-grow property.

The flex-shrink and flex-basis properties will be set to 1 and 0.

flex: 1  === flex: 1 1 0

Items im Verhältnis verteilen

.row_cell--1 {
 flex: 2
}.row_cell--3 {
 flex: 1
}
.row_cell--3 {
 flex: 3
}

Vertikale Ausrichtung in einer Zeile

Entweder vom Flex-Container aus z.B.

align-items: center

oder auf Item Ebene z.B.

align-self: flex-end

Items in einer Spalte

html,body{
height: 100%;
}

Flex Container

display: flex

Flex Items

main{
flex-grow: 1;
}

Items Reihenfolge

flex-order

Einleitung

Flex arbeitet mit zwei Achsen um Boxen auszurichten und zu verteilen. Eine Hauptachse (standardmäßig horizontal) und einer sekundären Achse (vertikal). Wenn man flex-direction auf column setzt. Vertauschen sich die Achsen.

Ausrichten an den Achsen

An der primären Achse richtet man mit justify-content: [Wert] aus. An der sekundären mit align-Items: [Wert]

Hauptachse (primäre Achse)

flex-wrap : nowrap
flex-wrap : wrap
flex-wrap : wrap-revers
flex-wrap : column-revers

Alte Syntax für IE10

-ms-flex-wrap : none
-ms-flex-wrap : wrap
-ms-flex-wrap : wrap-revers
-ms-flex-wrap : column-revers

IE 10 braucht

display:inline-block 

für die Flex-Items, damit wrap funktioniert.

Sekundäre Achse

justify-content : flex-start
justify-content : flex-end
justify-content : center
justify-content : space-between
justify-content : space-around

Alte Syntax für IE10

-ms-flex-pack : start
-ms-flex-pack : end
-ms-flex-pack : center
-ms-flex-pack : justify
-ms-flex-pack : distribute

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

IE 10

Für diesen braucht man noch die alte Syntax.

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.

3

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties

3

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.

Tipps und Tricks

• Nicht mit position absolute mischen

Feste Höhe für Footer und Header + Stretched Main

<div class="container">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</main>
</div>

.container{
  display:flex;
  flex-direction: column;
}
header, footer{
height: 50px;
flex-shrink: 0;// prevent getting to small and cut off contents;
}
main{
flex-grow: 1;
}

Columns full height

.fill-height-or-more {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
} 

.fill-height-or-more > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

Hero Section mit Flex

• Container bekommt flex und flex-direction column
• Item bekommt Höhe 100vh

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>

Homepage Layout

<!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>