%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}




%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-flex.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
    \LARGE % Schriftgröße
    \bfseries % Fettdruck
    \sffamily % Serifenlose Schrift
    CSS Flex Layout
\end{center}

\paragraph{Quelle}
\href{https://css-tricks.com/snippets/css/a-guide-to-flexbox/}{css-tricks.com/snippets/css/a-guide-to-flexbox}

\section*{Parent (Flex Container)}

\subsection*{1. Flex-Layout für Container aktivieren}
\begin{verbatim}
display: flex;
\end{verbatim}

\subsection*{2. Reihenfolge der Items}
\subsubsection*{Reihenfolge der Items (Definition der Hauptachse): $\rightarrow$,  $\leftarrow$, $\downarrow$, $\uparrow$}
\begin{verbatim}
flex-direction: row | row-reverse | column | column-reverse;
\end{verbatim}

\subsubsection*{Zeilenumbruch, falls nicht alle Elemente auf die Hauptachse passen}
\begin{verbatim}
flex-wrap: nowrap | wrap | wrap-reverse;
\end{verbatim}

\subsubsection*{Shorthand für flex-direction und flex-wrap}
\begin{verbatim}
flex-flow: <flex-direction> <flex-wrap>;
\end{verbatim}

\subsection*{3. Verteilung der Items}
\subsubsection*{Verteilung des restlichen Platzes auf der Hauptachse (default: $\leftarrow$$\rightarrow$)}
\begin{verbatim}
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
\end{verbatim}

\subsubsection*{Verteilung des restlichen Platzes auf der Querachse (default $\downarrow$$\uparrow$) innerhalb einer Zeile}
\begin{verbatim}
align-items: stretch | flex-start | flex-end | center | baseline;
\end{verbatim}

\subsubsection*{Verteilung des restlichen Platzes auf der Querachse (default $\downarrow$$\uparrow$) zwischen mehreren Zeilen}
\begin{verbatim}
align-content: flex-start | flex-end | center | 
               space-between | space-around | space-evenly | stretch;
\end{verbatim}


\newpage


\section*{Children (Flex Items)}
\subsection*{1. Reihenfolge eines Items ändern}
\begin{verbatim}
order: 5;   /* default 0 */
\end{verbatim}

\subsection*{2. Anordung eines Items auf der Querachse ändern (vgl. \texttt{align-items})}
\begin{verbatim}
align-self: auto | flex-start | flex-end | center | baseline | stretch;
\end{verbatim}

\subsection*{3. Relative Breite eines Items}
\subsubsection*{Minimale Breite: Schrumpfen, falls zu wenig Platz für Idealbreite zur Verfügung steht}
\begin{verbatim}
flex-shrink: 0;   /* niemals schrumpfen */
flex-shrink: 1;   /* default: anteiliges Schrumpfen */  
\end{verbatim}

\subsubsection*{Maximale Breite: Wachsen, falls mehr Platz als Idealbreite zur Verfügung steht}
\begin{verbatim}
flex-grow: 0;   /* default: niemals wachsen */
flex-grow: 1;   /* genauso breit wie die anderen Elemente mit 1 */
flex-grow: 2;   /* doppelt so breit wie die anderen Elemente mit 1 */
\end{verbatim}

\subsubsection*{Idealbreite}
\begin{verbatim}
flex-basis: 100px | 50% | 5em | auto;   /* default auto */
flex-basis: auto;   /* so breit wie Inhalt */
flex-basis: 0;      /* möglichst schmal */
\end{verbatim}

\subsubsection*{Shorthand für flex-grow, flex-shrink und flex-basis (empfohlen!)}
\begin{verbatim}
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex:    [min]       [max]        [ideal];
flex:      0           1           auto;   /* default */
\end{verbatim}
\end{document}
