\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{AGD (agarciadutaitre)}
\pdfinfo{
  /Title (css3-flexbox.pdf)
  /Creator (Cheatography)
  /Author (AGD (agarciadutaitre))
  /Subject (CSS3 flexbox 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}{CF432E}
\definecolor{LightBackground}{HTML}{FCF3F1}
\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{CSS3 flexbox Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{AGD (agarciadutaitre)} via \textcolor{DarkBackground}{\uline{cheatography.com/174798/cs/38595/}}}
\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}AGD (agarciadutaitre) \\
  \uline{cheatography.com/agarciadutaitre} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 8th May, 2023.\\
   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{1.2 cm} x{6.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inclure du CSS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{fichier} & \textless{}link href="./css/styles.css" rel="stylesheet" type="text/css"/\textgreater{} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{inline} & \textless{}div style="background-color:black"\textgreater{}\textless{}/div\textgreater{} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Interne} & \textless{}style type="text/css"\textgreater{}\textless{}/style\textgreater{} \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Flexbox}}  \tn
% Row 0
\SetRowColor{LightBackground}
Display:flex & mode flexbox \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{flex-direction:}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & définit la direction dans laquelle les éléments sont placés. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
exemple & \seqsplit{flex-direction:column-reverse} \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Valeurs possibles :} \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
row & Les éléments sont disposés dans la même direction que le texte. \tn 
% Row Count 10 (+ 3)
% Row 5
\SetRowColor{white}
column & Les éléments sont disposés de haut en bas. \tn 
% Row Count 12 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{row-reverse} & Les éléments sont disposés dans la direction opposée au texte. \tn 
% Row Count 15 (+ 3)
% Row 7
\SetRowColor{white}
\seqsplit{column-reverse} & Les éléments sont disposés de bas en haut. \tn 
% Row Count 17 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{align-items :}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & aligne les éléments verticalement \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Valeur possible:} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\seqsplit{flex-start} & Les éléments s'alignent au haut du conteneur. \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
flex-end & Les éléments s'alignent au bas du conteneur. \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
center & Les éléments s'alignent au centre vertical du conteneur. \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
baseline & Les éléments s'alignent à la ligne de base du conteneur. \tn 
% Row Count 14 (+ 3)
% Row 7
\SetRowColor{white}
stretch & Les éléments sont étirés pour s'adapter au conteneur. \tn 
% Row Count 16 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.6 cm} x{4.4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{align-self:}}  \tn
% Row 0
\SetRowColor{LightBackground}
exemple & align-self:center \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Cette propriété accepte les mêmes valeurs que align-items, mais s'applique seulement à l'élément ciblé.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{justify-content:}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & aligne les éléments horizontalement \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
exemple & justify-content:flex-end \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Valeur possibles:} \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{flex-start} & Les éléments s'alignent au côté gauche du conteneur. \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
flex-end & Les éléments s'alignent au côté droit du conteneur. \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
center & Les éléments s'alignent au centre du conteneur. \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{space-between} & Les éléments s'affichent avec un espace égal entre eux. le premier élément est aligné sur le bord du conteneur. \tn 
% Row Count 17 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{space-around} & Les éléments s'affichent avec un espacement égal à l'entour d'eux. \tn 
% Row Count 20 (+ 3)
% Row 9
\SetRowColor{white}
\seqsplit{space-evenly} & cette propriété répartit l'espace disponible de manière égale entre les éléments du conteneur.Cela donnera des espaces identiques entre chaque paire d'éléments, ainsi qu'entre le premier élément et le bord du conteneur, et entre le dernier élément et le bord opposé du conteneur. \tn 
% Row Count 31 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.68 cm} x{4.32 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Sélecteurs}}  \tn
% Row 0
\SetRowColor{LightBackground}
a & tous les éléments a \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
div p & tous les éléments p enfants d'une div \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
.menu \textgreater{} ul & tous les éléments ul enfants directs d'un élément dont l'attribut class est menu \tn 
% Row Count 7 (+ 4)
% Row 3
\SetRowColor{white}
p + span & un élément span adjacent à un paragraphe \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
.xxx & élément dont l'attribut class est xxx \tn 
% Row Count 12 (+ 2)
% Row 5
\SetRowColor{white}
\#yyy & élément dont l'attribut id est yyy \tn 
% Row Count 14 (+ 2)
% Row 6
\SetRowColor{LightBackground}
input{[}type=text{]} & tous les éléments de formulaire input dont l'attribut type est text \tn 
% Row Count 18 (+ 4)
% Row 7
\SetRowColor{white}
h1,h2,h3 & définition commune pour les éléments h1,h2 et h3 \tn 
% Row Count 21 (+ 3)
% Row 8
\SetRowColor{LightBackground}
p h2 & descendant (h2 dans un p) \tn 
% Row Count 23 (+ 2)
% Row 9
\SetRowColor{white}
a:visited & pseudo-classe lien visité \tn 
% Row Count 25 (+ 2)
% Row 10
\SetRowColor{LightBackground}
div:hover & pseudo-classe passage souris sur element div \tn 
% Row Count 28 (+ 3)
% Row 11
\SetRowColor{white}
:first-letter ; :before ; :after & pseudo-classe \tn 
% Row Count 30 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{align-content :}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & définir comment plusieurs lignes sont espacées  l'une à l'autre \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Valeurs possibles :} \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\seqsplit{flex-start} & Les lignes sont amassées dans le haut du conteneur \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
flex-end & Les lignes sont amassées dans le bas du conteneur. \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
center & Les lignes sont amassées dans le centre vertical du conteneur. \tn 
% Row Count 13 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{space-between} & Les lignes s'affichent avec un espace égal entre eux. \tn 
% Row Count 15 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{space-around} & Les lignes s'affichent avec un espace égal autour d'eux. \tn 
% Row Count 17 (+ 2)
% Row 8
\SetRowColor{LightBackground}
stretch & Les lignes sont étirées pour s'adapter au conteneur. \tn 
% Row Count 19 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Quand il n'y a qu'une seule ligne, align-content n'a aucun effet.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{flex-wrap:}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & spécifie si l'élément doit être sur une seule ligne ou pas \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
nowrap & Tous les éléments sont tenus sur une seule ligne. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
wrap & Les éléments s'enveloppent sur plusieurs lignes au besoin. \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{wrap-reverse} & Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé. \tn 
% Row Count 13 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{order:}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & order est appliqué à des éléments individuels. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
s'utilise avec & display:flex \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
exemple & order:1 \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Par défaut, les éléments ont une valeur order de 0, mais on peut utiliser cette propriété pour mettre une valeur à un entier positif ou négatif. Le éléments s'affichent alors par ordre du plus petit au plus grand.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.36 cm} x{4.64 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{flex-flow}}  \tn
% Row 0
\SetRowColor{LightBackground}
s'utilise avec & display:flex \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Par exemple & flex-flow: row wrap \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Les deux propriétés flex-direction et flex-wrap sont utilisées tellement souvent ensembles que le raccourci flex-flow a été créé pour les combiner. Ce raccourci accepte les valeurs des deux propriétés séparées par un espace.}  \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}{reference}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\seqsplit{http://www.w3schools.com/cssref/}} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}