\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Der Exilant (The Exilant)}
\pdfinfo{
  /Title (flex-box-german.pdf)
  /Creator (Cheatography)
  /Author (Der Exilant (The Exilant))
  /Subject (Flex Box german Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{0A5BA3}
\definecolor{LightBackground}{HTML}{EFF4F9}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Flex Box german Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Der Exilant (The Exilant)} via \textcolor{DarkBackground}{\uline{cheatography.com/26169/cs/7369/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Der Exilant (The Exilant) \\
  \uline{cheatography.com/the-exilant} \\
        \uline{\seqsplit{www}.pixel-anarchy.de}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 4th March, 2016.\\
   Updated 10th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Hintergrund}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Um einen mit Flex Boxen zu arbeiten, muss man einen Flex-Container definieren, welcher, als Eltern-Element, die Flex  Elemente umschlie{\ss}t. Ob sich der Flex Container wie ein inline oder ein block-Element verh{\"a}lt, bestimmt der gegebene Wert. \newline % Row Count 5 (+ 5)
Hat man einen Flex Container definiert, so bestimmt dieser die flex Eigenschaften der beinhalteten Kind-Elemente. \newline % Row Count 8 (+ 3)
Das Flexbox Layout ist ein Modul zielt darauf ab, einen effizienteren Weg anzubieten, um den Platz zu verteilen, aufzuteilen und auszurichten, welchen Elemente einnehmen. Selbst wenn deren Gr{\"o}{\ss}e nicht bekannt ist und/oder dynamisch. Daher auch der Begriff "Flex". \newline % Row Count 14 (+ 6)
Die Hauptidee hinter dem Flex Layout ist es, einem Container die F{\"a}higkeit zu verleihen, die H{\"o}he/Breite der Elemente seines Inhaltes zu ver{\"a}ndern und anzuordnen, um den verfügbaren Platz bestm{\"o}glich auszunutzen. Prim{\"a}r um sich bestm{\"o}glich an alle Arten von Displays und Aufl{\"o}sungen anzupassen.% Row Count 21 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Das Flexbox Layout ist ideal geeignet für die Komponenten einer Anwendung und Layout mit einem kleinen Ma{\ss}stab. Das Raster Layout (Grid) hingegen ist für gr{\"o}{\ss}ere Ma{\ss}st{\"a}be gedacht.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Eltern Container}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457090500_flex-container.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{display}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert einen Flex Container \newline % Row Count 1 (+ 1)
Code: \newline % Row Count 2 (+ 1)
`.container \{` \newline % Row Count 3 (+ 1)
`display: flex /{\emph{ oder inline-flex }}/ ;` \newline % Row Count 4 (+ 1)
`\}`% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{CSS-Columns haben keinen Einfluss auf einen Flex-Container}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-direction}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457091028_flex-direction1.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-direction}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{definiert die Hauptachse, an der die Flex-Elemente im Flex-Container angeordnet werden. Flexbox ist ein Layout Konzept, gedacht ist um nur in eine Richtung gerichtet ist. Flex Elemente werden entweder in horizontalen oder vertikalen Spalten ausgerichtet. \newline % Row Count 6 (+ 6)
Code: \newline % Row Count 7 (+ 1)
`.container \{` \newline % Row Count 8 (+ 1)
`flex-direction: row | row-reverse | column | column-reverse ;` \newline % Row Count 10 (+ 2)
`\}`% Row Count 11 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{row(default): ordnet von links nach rechts an \newline row-revers: ordnet von rechts nach links an \newline column: ordnet von oben nach unten an \newline column-reverse: ordnet die Elemente von unten nach oben an.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-wrap}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457091924_flex-wrap.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-wrap}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Von Haus aus versuchen alle Flex-Elemente sich in einer Zeile anzuordnen. Ändern kann man dies mit dem `flex-wrap` Attribut. Die Richtung spielt auch eine Rolle, in dem sie bestimmt, in welcher Richtung die neue Zeile aufgefüllt wird. \newline % Row Count 5 (+ 5)
Code: \newline % Row Count 6 (+ 1)
`.container \{` \newline % Row Count 7 (+ 1)
`flex-wrap: nowrap | wrap | wrap-reverse ;` \newline % Row Count 8 (+ 1)
`\}`% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{nowrap (Standard): Anordnung in einer Zeile von lnks nach rechts \newline wrap: Anordnung in mehreren Zeilen von links nach rechts \newline wrap-reverse: Anordnung in mehreren Zeilen von rechts nach links}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-items}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert das Standardverhalten wie Kind Elemente entlang der Hauptachse angeordnet werden.  \newline % Row Count 2 (+ 2)
Code: \newline % Row Count 3 (+ 1)
`.container \{` \newline % Row Count 4 (+ 1)
`align-items: flex-start | flex-end | center | stretch | baseline ;` \newline % Row Count 6 (+ 2)
`\}` \newline % Row Count 7 (+ 1)
{\bf{flex-start}}: Alle Elemente werden am oberen Rand des Eltern Containers angeordnet. \newline % Row Count 9 (+ 2)
{\bf{flex-end}}: Alle Elemente werden am unteren Rand des Eltern Containers angeordnet. \newline % Row Count 11 (+ 2)
{\bf{center}}: Alle Elemente werden mittig im Eltern Container angeordnet. \newline % Row Count 13 (+ 2)
{\bf{stretch}} (Standard): Streckt alle Kind Elemente bis an den oberen und unteren Rand des Eltern Containers. \newline % Row Count 16 (+ 3)
{\bf{baseline}}: Alle Elemente werden entlang der Basislinie ihres Inhaltes ausgerichtet.% Row Count 18 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Man kann `align-items` als vertikale Version von `justify-content` betrachten.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-items}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457092809_align-items.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Kind Elemente}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457090896_flex-items.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{order}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Grunds{\"a}tzlich werden flex-Elemente in der Reihenfolge, wie sie im Quelltext stehen angezeigt. \newline % Row Count 2 (+ 2)
Jedoch l{\"a}sst sich, mittels `order`, eine eigene Reihenfolge vorgeben, in welcher die Elemente angezeigt werden. \newline % Row Count 5 (+ 3)
Code: \newline % Row Count 6 (+ 1)
`.item \{` \newline % Row Count 7 (+ 1)
`order: \textless{}integer\textgreater{} \textless{}integer\textgreater{} ...;` \newline % Row Count 8 (+ 1)
`\}`% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{order}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457090813_order-2.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-self}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Erlaubt es, die Standardausrichtung oder der Ausrichtung, welche mittels `align-item` definiert wurde, für ein einzelnes Kind Element zu überschreiben. \newline % Row Count 4 (+ 4)
Code: \newline % Row Count 5 (+ 1)
`.item \{` \newline % Row Count 6 (+ 1)
`align-self: auto | flex-start | flex-end | center | baseline | stretch ; ` \newline % Row Count 8 (+ 2)
`\}` \newline % Row Count 9 (+ 1)
Es gelten die gleichen Erkl{\"a}rungen der Attributwerte, wie sie für `align-items` gelten.% Row Count 11 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`float`, `clear` und `vertical-align` haben keinerlei Auswirkungen auf ein Flex Element.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-self}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457097618_align-self.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Grundlagen und Terminologie}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Da Flexbox ein komplettes Modul ist und nicht nur ein einzelnes Attribut, beinhaltet es selbst eine ganze Anzahl an Attributen. Einige davon werden auf den umschliessenden Eltern Container angewendet, andere auf dessen Kind-Elemente. \newline % Row Count 5 (+ 5)
W{\"a}hrend ein normales Layout sowohl auf block als auch auf inline Flie{\ss}richtungen aufgebaut ist, basiert das Flexbox Layout auf dem {\emph{flex-flow}}-Fluss.% Row Count 9 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Flexbox Model}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457097988_flexbox.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Legende}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Attribute welche auf die Eltern Container angewendet werden, haben ein dunkleres Blau und Kind Elemente sind mit einem helleren Blau als dem, welches für Informationen verwendet wurde.% Row Count 4 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-flow}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Dies ist eine Kurzform für die Attribute `flex-direction` und `flex-wrap, die zusammen das Verhalten für Quer und L{\"a}ngsachse eines Flex Containers definieren. \newline % Row Count 4 (+ 4)
Code: \newline % Row Count 5 (+ 1)
`.container \{` \newline % Row Count 6 (+ 1)
`flex-flow: \textless{}flex-direction\textgreater{} || \textless{}flex-wrap\textgreater{} ;` \newline % Row Count 7 (+ 1)
`\}`% Row Count 8 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Standardverhalten ist `row nowrap`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{justify-content}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert die Anordnung entlang der hori- zontalen Achse. `justify-content` hilft den übrigen freien Raum zu verteilen, wenn alleElemente in der Zeile unflexibel sind, oder wenn sie zwar flexibel sind, aber ihre maximale Gr{\"o}{\ss}e bereits erreicht haben. Erm{\"o}glicht weiter die Anordnung von Elementen, wenn sie die Zeilenbreite überschreiten würden. \newline % Row Count 8 (+ 8)
Code: \newline % Row Count 9 (+ 1)
`.container \{` \newline % Row Count 10 (+ 1)
`justify-content: flex-start | flex-end | center |space-between | space-around ;` \newline % Row Count 12 (+ 2)
`\}` \newline % Row Count 13 (+ 1)
{\bf{flex-start}} (Standard): Die Elemente werden zum Anfang hin, nach links, verschoben. \newline % Row Count 15 (+ 2)
{\bf{flex-end}}: Die Elemente werden zum Ende hin, nach rechts, verschoben. \newline % Row Count 17 (+ 2)
{\bf{center}}: Die Elemente werden in der Mitte angeordnet. \newline % Row Count 19 (+ 2)
{\bf{space-between}}: Die Elemente werden gleichfürmig über die Zeile verteilt. Erstes Element ganz links, das Letzte ganz rechts. \newline % Row Count 22 (+ 3)
{\bf{space-around}}: Die Elemente werden gleichm{\"a}{\ss}ig über die Zeile veteilt, haben aber an allen seiten den selben Abstand, sowohl zum Zeilenanfang/ende, als auch zum n{\"a}chsten Element.% Row Count 26 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Bei `space-around` muss beachtet werden, da jedes Element immer den selben Abstand zum n{\"a}chstgen Element hat, erzeugt das eine optisch ungleiche Verteilung. Das liegt daran, dass beim ersten Element links nur ein Abstand ist, aber zwischen den Elementen immer sich zwei Abst{\"a}nde addieren.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{justify-content}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457090339_justify-content.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-content}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Ordnet die Zeilen der Kind Elemente an, sollte es noch Platz geben in der Horizontalen. Ähnlich wie `justify-content` individuelle Elemente an der Hauptachse ausrichtet. \newline % Row Count 4 (+ 4)
Code: \newline % Row Count 5 (+ 1)
`.container \{` \newline % Row Count 6 (+ 1)
`align-content: flex-start | flex-end | center | stretch | space-between | space-around ;` \newline % Row Count 8 (+ 2)
`\}` \newline % Row Count 9 (+ 1)
{\bf{flex-start}}: Richtet alle Zeilen nach oben links am Eltern Container aus. \newline % Row Count 11 (+ 2)
{\bf{flex-end}}: Richtet alle Zeilen nach unten links am Eltern Container aus. \newline % Row Count 13 (+ 2)
{\bf{center}}: Richtet alle Elemente mittig im Eltern Container aus. \newline % Row Count 15 (+ 2)
{\bf{stretch}} (Standard): Richtet alle Elemente mittig im Eltern Container aus und verteilt sie gleichm{\"a}{\ss}ig die H{\"o}he der Elemente. \newline % Row Count 18 (+ 3)
{\bf{space-between}}: Richtet alle Zeilen über die volle H{\"o}he des Eltern Containers aus. Die erste und letzte Zeile werden ganz an den Eltern Container angelegt. \newline % Row Count 22 (+ 4)
{\bf{space-around}}: Verteilt die Platz zwischen den Zeilen gleichm{\"a}{\ss}ig. Jedoch ist auch hier das selbe optische "ungleichgewicht" zu beachten, wie es auch bei `justify-content` entsteht.% Row Count 26 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Hat keine Auswirkungen wenn es nur eine Zeile an Kind Elementen gibt.}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{align-content}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457097314_align-content.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-grow}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert die F{\"a}higkeit eines Elementes seine Gr{\"o}{\ss}e zu ver{\"a}ndern, sollte es n{\"o}tig sein. `flex-grow` akzeptiert einheitenlose Werte als Proportion. Dies definiert wie viel des maximalen Platzes ein Elementes, innerhalb eines Containers, ausnutzen kann. \newline % Row Count 6 (+ 6)
Haben alle Elemente das Attribut `flex-grow`auf 1 gesetzt bekommen, wird der Platz zwischen den Elementen gleichm{\"a}{\ss}ig unter seinen Kind-Elementen aufgeteilt. \newline % Row Count 10 (+ 4)
Code: \newline % Row Count 11 (+ 1)
`.item \{` \newline % Row Count 12 (+ 1)
`flex-grow: \textless{}Zahl\textgreater{} ;` \newline % Row Count 13 (+ 1)
`\}`% Row Count 14 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Negative Zahlen sind nicht zul{\"a}ssig! Der Standardwert für `flex-grow` ist 0.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-grow}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457097864_flex-grow.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-shrink}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert die F{\"a}higkeit eines Kind Elementes zu schrumpfen. \newline % Row Count 2 (+ 2)
Code: \newline % Row Count 3 (+ 1)
`.element \{` \newline % Row Count 4 (+ 1)
`flex-shrink: \textless{}zahl\textgreater{} ;` \newline % Row Count 5 (+ 1)
`\}`% Row Count 6 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Standardeinstellung für den Zahlenwert ist 1. Negative Zahlen sind nicht erlaubt.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-basis}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Definiert die Ausgangsgr{\"o}{\ss}e eines Elementes bevor der verbliebene Platz verteilt wird. Es kann sowohl ein Prozentwert (z.B. 25\%), als auch ein fixer Wert (z.B. 3em|125px) angegeben werden. Aber auch ein Schlüsselwort ist m{\"o}glich. Der Schlüssel `auto` bedeutet, "beziehe dich auf die mir zugewiesene Breite/H{\"o}he". Der Schlüssel `content` bedeutet, die Gr{\"o}{\ss}e ist anh{\"a}ngig vom Inhalt. Leider wird dieser Schlüssel noch nicht sonderlich gut unterstützt, daher ist es schwierig zu sagen, wie das Element sich verh{\"a}lt, ganz zu schweigen von seinen Abarten `max-content`, `min-content`und `fit-content`. \newline % Row Count 13 (+ 13)
Code: \newline % Row Count 14 (+ 1)
`.element \{` \newline % Row Count 15 (+ 1)
`flex-basis: \textless{}wert\textgreater{} | \textless{}schlüsselwort\textgreater{} ;` \newline % Row Count 16 (+ 1)
`\}`% Row Count 17 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Wird der Wert auf `0`gesetzt,}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{flex-basis}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1457097720_abmakouas-cover.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}