davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
169 提交
1 分支
目录树: df9a5c5108
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/fbd6c4abb662dccda9fc18f7dbd.../index.html

index.html 30KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Le petit flexbox illustré (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Le petit flexbox illustré (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre">Source originale du contenu</a></h3>

  463.     <p><i lang="en">Flexbox</i> est un nouveau module d’affichage CSS qui apporte quelques possibilités graphiques jusqu’alors impossibles et qui permet aussi de grandement simplifier les constructions habituelles.</p>

  464. 

  465. <p>Son principal frein reste le support limité à <abbr title="Internet Explorer">IE</abbr> 10+ (pas de souci pour la majorité des autres navigateurs), mais au regard des nouveautés offertes, il est d’ores et déjà intéressant d’en comprendre le fonctionnement et de résoudre certaines problématiques grâce à celui-ci.</p>

  466. 

  467. <p><hr/>

  468. <p>Déclencher un affichage <i lang="en">flexbox</i> passe par la propriété <code>display</code>.</p>

  469. <p><i lang="en">Flexbox</i> diffère un peu des types d’affichages habituels car le changement va ici non seulement impacter l’élément sélectionné, mais également ses enfants <strong>directs</strong>.<br/>

  470. Ainsi on parlera de <i lang="en">flex-container</i> et de <i lang="en">flex-items</i> ; et il sera possible de passer des propriétés spécifiques à ces deux composants.</p>

  471. <p>Il sera tout à fait possible aussi qu’un élément soit à la fois un <i lang="en">flex-items</i>  et un <i lang="en">flex-container</i> : autrement dit, les imbrications <i lang="en">flexbox</i> sont possibles.</p>

  472. <p>La courbe d’apprentissage du module peut paraître abrupte au premier abord. C’est sans compter les simplifications que permettent des outils comme <a href="https://github.com/postcss/autoprefixer"><i lang="en">autoprefixer</i></a>, qui viennent gommer les historiques de nommages et d’implémentations qui ont été faites.</p>

  473. <p>En effet <i lang="en">flexbox</i> en est toujours au stade du brouillon et a déjà subi trois refontes. On peut néanmoins penser qu’après un travail mené depuis plus de six ans, il soit maintenant suffisamment mature ; tout comme le statut actuel (<i lang="en">last call</i>) de la spécification et le nombre très faible de tickets encore ouverts le laisse entendre.</p>

  474. <p>Quoi qu’il en soit, au lieu de devoir écrire :</p>

  475. <pre><code>.foo

  476. {

  477.     display: -webkit-box;

  478.     display: -webkit-flex;

  479.     display: -ms-flexbox;

  480.     display: flex;

  481. }</code></pre>

  482. <p>il suffira simplement de passer par ce code pour que le post-processeur génère la même chose :</p>

  483. <pre><code>.foo

  484. {

  485.     display: flex;

  486. }</code></pre>

  487. <p>On retrouve alors une courbe d’apprentissage relativement douce, où la principale difficulté reste le nombre de nouveautés. Nous allons donc passer en revue chacune d’elles méthodiquement, en commençant par les propriétés qui peuvent s’appliquer au <i lang="en">flex-container</i>.</p>

  488. <hr/>

  489. <p>Retenez cependant avant tout qu’un <i lang="en">flex-container</i> ou un <i lang="en">flex-item</i> appliquent un contexte de formatage de type <i lang="en">flex</i> équivalent au <a href="http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html">type <code>block</code></a>. (N’hésitez pas à lire maintenant ou plus tard l’article lié si ce concept ne vous semble pas clair.)</p>

  490. <h2>Propriétés sur le <i lang="en">flex-container</i></h2>

  491. <h3>La direction</h3>

  492. <p><strong><code>flex-direction</code></strong> permet de gérer la direction, par défaut en ligne (<code>row</code>) ; on pourra aussi la passer en colonne (<code>column</code>) très facilement.</p>

  493. <hr/>

  494. <p>La démonstration qui suit  fait alterner différents affichages à chaque clic de votre part.<br/>

  495. (Il en sera de même sur la plupart des démonstrations de cette page.)</p>

  496. <hr/></p>

  497. <p>On pourra également inverser les flux et utiliser <code>row-reverse</code> et <code>column-reverse</code>.</p>

  498. 

  499. <h3>Les débordements</h3>

  500. 

  501. <p><strong><code>flex-wrap</code></strong> permet de gérer les débordements des <i lang="en">flex-items</i> dans les lignes ou dans les colonnes.<br/>

  502. Bien que par défaut ils ne soient pas autorisés (<code>nowrap</code>), il est tout à fait possible de changer ce comportement avec <code>wrap</code>.</p>

  503. 

  504. <p>On pourra même inverser le flux et les débordements avec <code>wrap-reverse</code>.</p>

  505. 

  506. <p>Notez que <code>flex-direction</code> et <code>flex-wrap</code> peuvent s’utiliser conjointement avec la propriété raccourcie <strong><code>flex-flow</code></strong>.</p>

  507. 

  508. <p>Par exemple : </p>

  509. 

  510. <pre><code>.bar

  511. {

  512.     flex-direction: column;

  513.     flex-wrap: wrap;

  514. }</code></pre>

  515. 

  516. <p>sera équivalent à :</p>

  517. 

  518. <pre><code>.bar

  519. {

  520.     flex-flow: column wrap;

  521. }</code></pre>

  522. 

  523. <h3>La justification sur l’axe principal</h3>

  524. 

  525. <p><strong><code>justify-content</code></strong> aligne les <i lang="en">flex-items</i> le long de l’axe principal.</p>

  526. 

  527. <p><hr/>

  528. <p>On parle d’axe principal et d’axe secondaire plutôt que d’axe vertical et horizontal car cela varie en fonction de la direction.</p>

  529. <hr/></p>

  530. <p>Par défaut les éléments sont empilés en début de flux (<code>flex-start</code>). Ils pourront l’être en fin de flux (<code>flex-end</code>), au milieu (<code>center</code>), espacés entre eux au maximum (<code>space-between</code>) ou espacés chacun d’eux par une marge identique (<code>space-around</code>).</p>

  531. 

  532. <p><hr/>

  533. <p>Vous remarquerez quelques petites animations CSS qui permettent de mieux comprendre comment sont effectuées certaines répartitions d’espaces.</p>

  534. <hr/>

  535. <h3>La justification sur l’axe secondaire</h3>

  536. <p>Les enfants du <i lang="en">flex container</i> sont alignés :</p>

  537. <ul>

  538. <li>avec <code>align-items</code> au niveau de chaque ligne ;</li>

  539. <li>avec <code>align-content</code> au niveau de l’ensemble des lignes (il en faut donc plusieurs pour en constater l’effet).</li>

  540. </ul>

  541. <p><strong><code>align-items</code></strong> prend par défaut la valeur <code>stretch</code>, et accepte également <code>flex-start</code>, <code>flex-end</code>, <code>center</code> et <code>baseline</code>.</p></p>

  542. <p><strong><code>align-content</code></strong> prend par défaut la valeur <code>stretch</code>, et accepte également <code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>space-between</code> et <code>space-around</code>.</p>

  543. 

  544. <h2>Propriétés sur les <code>flex-items</code></h2>

  545. 

  546. <p>Passons maintenant aux propriétés qui s’appliquent sur les enfants directs du <i>flex-container</i> et commençons par la plus riche : <code>flex</code>.</p>

  547. 

  548. <p><hr/>

  549. <p>Ne confondez pas : nous avons vu plus haut ce mot-clef comme une nouvelle <em>valeur</em> de <code>display</code> ; il s’agit maintenant d’une nouvelle <em>propriété</em>.</p>

  550. <h3>Les dimensions</h3>

  551. <p><strong><code>flex</code></strong> est une propriété raccourcie qui combine <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code>.</p>

  552. <pre><code>.baz

  553. {

  554.     flex: 0 1 auto;

  555. }</code></pre>

  556. <p>a donc pour équivalent :</p>

  557. <pre><code>.baz

  558. {

  559.     flex-grow: 0;

  560.     flex-shrink: 1;

  561.     flex-basis: auto;

  562. }</code></pre>

  563. <ul>

  564. <li><code>flex-grow</code> définit les possibilités d’étirements d’un élément,</li>

  565. <li><code>flex-shrink</code> ses possibilités de contractions,</li>

  566. <li>et <code>flex-basis</code> sa dimension initiale.</li>

  567. </ul>

  568. <p>Par étirement et contraction, comprenez par là qu’un élément pourra voir sa taille surchargée afin de répondre au mieux à vos conditions et au contexte d’affichage courant.</p>

  569. <p><strong><code>flex-grow</code></strong> ne permet pas d’étirement quand il est à <code>0</code>, il faut passer un nombre positif plus ou moins important pour changer ce comportement par défaut.</p></p>

  570. <p><hr/>

  571. <p>Nous expliciterons un peu plus loin (avec <code>flex-basis</code>) la méthode de calcul qui définit les agrandissements. </p>

  572. <hr/>

  573. <p><strong><code>flex-shrink</code></strong> a pour valeur initiale 1 : la contraction est donc possible par défaut. On pourra lui passer un nombre nul ou un nombre positif pour annuler ou amplifier ce comportement.</p>

  574. <p>Plus un <code>flex-shrink</code> sera important, plus l’élément sera à même d’être compressé.</p></p>

  575. <p><strong>Comment sont calculées les compressions ?</strong></p>

  576. 

  577. <p>Lorsque les facteurs de compression sont identiques, les proportions entre les éléments sont conservées.</p>

  578. 

  579. <p>Dans le prochain exemple la taille du conteneur est revue (et animée) de manière à compresser les <i lang="en"> flex-items</i> dont les largeurs sont définies en pixels. </p>

  580. 

  581. <p>On constate une largeur identique entre le premier <i lang="en"> flex-item</i> et les trois suivants quelle que soit la taille du <i lang="en">flex-container</i>.<br/>

  582. Et il en va de même pour les largeurs des trois derniers <i lang="en"> flex-items</i> qui restent identiques.</p>

  583. 

  584. <p>Vous aurez peut-être noté que la largeur initiale des éléments intervient dans les calculs. Ainsi un élément deux fois plus large qu’un autre (et pourtant le même facteur de compression) se verra proportionnellement deux fois plus compressé si nécessaire.</p>

  585. 

  586. <p>Quand les facteurs de compression sont différents, l’espace retiré lors de la compression est aussi proportionnel au facteur de compression.</p>

  587. 

  588. <p>On constate ici que l’espace retiré du dernier <i lang="en"> flex-item</i> est trois fois plus grand que sur le second ; ainsi que deux fois plus grand que sur le troisième.<br/>

  589. Aucun espace n’est par contre retiré du premier.</p>

  590. 

  591. <p>Ce sont donc les facteurs de compressions et les tailles initiales des éléments qui influent sur le taux de compression possible de chacun.</p>

  592. 

  593. <p><strong><code>flex-basis</code></strong> est une propriété qui hérite par défaut (avec la valeur <code>auto</code>) de la largeur (<code>width</code>) ou de la hauteur (<code>height</code>) d’un élément, et ce en fonction de la direction définie sur le <i lang="en">flex-container</i>. </p>

  594. 

  595. <p>Elle peut aussi prendre une valeur qui viendra surcharger cette dimension.</p>

  596. 

  597. <p><code>flex-basis</code> va également redéfinir la taille minimale d’un élément (<code>min-width</code> ou <code>min-height</code>) et faire passer sa valeur par défaut de <code>0</code> à <code>auto</code>.</p>

  598. 

  599. <p>On peut ainsi définir un <code>flex-basis</code> à <code>0</code>, tout en conservant visuellement une taille minimale pour l’élément.</p>

  600. 

  601. <p><strong>Comment sont calculés les agrandissements ?</strong></p>

  602. 

  603. <p>Ce qui est très intéressant avec <code>flex-basis</code>, c’est qu’il entre en jeu pour les calculs de dimensionnement : sa valeur va donc considérablement influencer les comportements d’agrandissement.</p>

  604. 

  605. <ul>

  606. <li>Quand <code>flex-basis</code> est à <code>0</code>, c’est la taille des <i lang="en">flex-items</i> qui sera revue ;</li>

  607. <li>quand <code>flex-basis</code> est à <code>auto</code>, c’est l’espace restant qui sera revu.</li>

  608. </ul>

  609. 

  610. <h3>La justification sur l’axe secondaire</h3>

  611. 

  612. <p><code>align-items</code> (que nous avons vu plus haut) permet de justifier tous les éléments au sein d’un conteneur.</p>

  613. 

  614. <p><strong><code>align-self</code></strong> permet de cibler individuellement ses enfants.</p>

  615. 

  616. <p>Par défaut il est à <code>auto</code> et hérite du comportement du <i lang="en">flex-container</i> mais on retrouve les même valeurs possibles que pour <code>align-items</code>. À savoir :  <code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>baseline</code> et <code>stretch</code>.</p>

  617. 

  618. <h3>L’ordonnancement</h3>

  619. 

  620. <p><strong><code>order</code></strong> accepte uniquement des nombres entiers (négatifs ou positifs) et permet d’ordonner les éléments dans le flux. Il est fixé à <code>0</code> par défaut.</p>

  621. 

  622. <p>Les ordres qui sont appliqués aux éléments sont alors classés par ordre croissant et c’est tout le flux d’affichage qui peut s’en retrouver modifié.</p>

  623. 

  624. <p><hr/>

  625. <p>Outre cette compréhension basique des propriétés, il faudra bien sûr à l’avenir mieux appréhender l’utilisation de ce nouveau module. Agencements de propriétés, dégradations possibles, bugs…</p>

  626. <p>Par bien des aspects, je trouve que <i lang="en">flexbox</i> mélange les avantages des flottants et les avantages des tableaux. Nul doute : si vous êtes amenés à travailler dans des contextes responsifs, les possibilités offertes par <i lang="en">flexbox</i> vous intéresseront.</p>

  627. <hr/>

  628. <p>Voici pour compléter une liste de liens sur le sujet :</p></p>

  629. <ul>

  630. <li><a href="http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html">article général en français</a> ;</li>

  631. <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">article général en anglais</a> ;</li>

  632. <li><a href="http://la-cascade.ghost.io/tag/flexbox/">mises en applications commentées</a> ;</li>

  633. <li><a href="http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html">une grille de mise en page</a> ;</li>

  634. <li><a href="http://tzi.github.io/chewing-grid.css/">une seconde grille de mise en page</a> ;</li>

  635. <li><a href="http://jackintheflexbox.tumblr.com/">des exemples pratiques</a> ;</li>

  636. <li><a href="http://philipwalton.github.io/solved-by-flexbox/">d’autres exemples</a> ;</li>

  637. <li><a href="https://github.com/philipwalton/flexbugs">une liste de bugs</a> ;</li>

  638. <li><a href="http://chriswrightdesign.com/experiments/flexbox-adventures/">un article qui s’attarde un peu plus sur les calculs d’agrandissements et de compressions</a> ;</li>

  639. <li><a href="http://caniuse.com/#search=flexbox">le support actuel</a> ;</li>

  640. <li><a href="http://www.w3.org/TR/css3-flexbox/">la spécification</a>.</li>

  641. </ul>

  642. 

  643. <p>Bonnes lectures et bonnes expérimentations à tous.</p>

  644.   </article>

  645. </section>

  646. 

  647. 

  648. <nav id="jumpto">

  649.   <p>

  650.     <a href="/david/blog/">Accueil du blog</a> |

  651.     <a href="http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre">Source originale</a> |

  652.     <a href="/david/stream/2019/">Accueil du flux</a>

  653.   </p>

  654. </nav>

  655. 

  656. <footer>

  657.   <div>

  658.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  659.     <p>

  660.       Bonjour/Hi!

  661.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  662.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  663.     </p>

  664.     <p>

  665.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  666.     </p>

  667.     

  668.     <p>

  669.       Voici quelques articles choisis :

  670.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  671.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  672.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  673.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  674.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  675.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  676.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  677.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  678.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  679.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  680.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  681.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  682.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  683.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  684.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  685.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  686.     </p>

  687.     <p>

  688.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  689.     </p>

  690.     <p>

  691.       Je ne traque pas ta navigation mais mon

  692.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  693.       conserve des logs d’accès.

  694.     </p>

  695.   </div>

  696. </footer>

  697. <script type="text/javascript">

  698.   ;(_ => {

  699.     const jumper = document.getElementById('jumper')

  700.     jumper.addEventListener('click', e => {

  701.       e.preventDefault()

  702.       const anchor = e.target.getAttribute('href')

  703.       const targetEl = document.getElementById(anchor.substring(1))

  704.       targetEl.scrollIntoView({behavior: 'smooth'})

  705.     })

  706.   })()

  707. </script>