davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Experiment: Using Flexbox Today (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://chriswrightdesign.com/experiments/using-flexbox-today/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Experiment: Using Flexbox Today (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://chriswrightdesign.com/experiments/using-flexbox-today/">Source originale du contenu</a></h3>
    <p class="type-dropcap-first">
<span class="type-run-in">Flexbox adds a level of control</span> to our layouts that we didn't really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flex's features will add an important set of tools to how we build, not by replacing what was there before, but improving upon how we build today.
</p>

<p>
The major challenge that I see with Flexbox is that there's a distinct gap between what we build today and how we'll approach tomorrow. The prevailing attitude seems to be “Not for another x years”, or “we'll wait for X browser to catch up”, but we don't need to think like this anymore.
</p>

<p>
I don't blame people for finding Flexbox difficult to grasp. Most of the tutorials that exist on the web either show you a bunch of boxes that are completely abstract, or jump so far ahead that the only logical thing to do with Flexbox is to work backward from these magically simple layouts, and end up in a mountain of unmaintainable code. My own previous article was the former, I wrote it to understand Flexbox.
</p>

<p>
These tutorials exist for a purpose, either they're trying to show you what the properties are and what they do, or they're trying to excite you about future possibilities. Both of which I believe they succeed at doing, but there's still a gap - we need a logical, pragmatic approach to start using Flexbox today.
</p>

<h2>Road to Flexbox</h2>

<p>
In this experiment, I'm attempting to show the value of Flexbox
in today's layouts, outline a strategy for adding it and give a few examples of how Flexbox can give current layouts extra powers that we either couldn't achieve, or were difficult to achieve before.
I'll also be documenting some of the common mistakes that I've made while trying to implement it as I believe being able to troubleshoot any new technology's problems is sometimes one of the harder things in picking up something new. My aim is that more people start using Flexbox so that we can push its limits, and get any bugs ironed out, sooner rather than later.
</p>

<p>
If you're not already familiar with Flexbox, this is a follow up of my previous experiment <a href="/experiments/flexbox-adventures/">Flexbox adventures</a>, where I tried to tackle and understand how it actually calculates space and how it might be used in the future. It's full of helpful links that'll bring you up to speed on Flexbox.
</p>

<h2>Making layouts better</h2>

<p>
Flexbox's properties involve a whole array of control over alignment and ordering, and once you get used to how it works, it starts to become clear how little CSS you actually have to write to augment how we're building things today.
</p>

<p>
Do I believe we'll completely drop floats, inline block, or display table? No, and I think educators should still teach students these things even if they do get eventually phased out, it's important to know that sometimes with CSS, we bend, and that's where interesting discoveries are made.
</p>

<p>
Here are some examples of layouts that I believe we can improve quite easily by adding Flexbox.
</p>

<h3>Card Layouts</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/flex_card-dropbox.png" alt="Dropbox Docu"/>
<figcaption class="caption-below">Card Pattern: Dropbox documentation </figcaption>
</figure>

<p>
The card layout is pretty popular, but in order to get equal height columns you have to set minimum heights, or split lists up into rows. If you don't split them into rows, you have to clear after every row. Flexbox gives us the ability to solve these problems with ease.
</p>

<h3>Split screen layouts</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_atlassian.png" alt="Atlassian"/>
<figcaption class="caption-below">Split Layout pattern: Atlassian </figcaption>
</figure>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_khan.png" alt="Khan Academy"/>
<figcaption class="caption-below">Split Layout pattern: Khan academy </figcaption>
</figure>

<p>
One of the difficulties with split screen is it's reliance on minimum height or position:absolute stretching, making it a pain when moving across screen sizes. Flexbox can just give each item equal height, and then provide you with options for vertical centering with ease.
</p>

<h3>Pinned Layouts</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_danmall.png" alt="Dan Mall's website"/>
<figcaption class="caption-below">Dan Mall uses a pinned layout on the Crayola case study, as recreated in Flexbox by Zoe Gillenwater in <a href="http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/">this post</a>.</figcaption>
</figure>

<p>
Using the space-between property this layout can be achieved with Flexbox, and give options for ordering and alignment.
</p>

<h3>Newspaper and ad units</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_guardian.png" alt="The Guardian website"/>
<figcaption class="caption-below">Newspaper and ad units, the latest Guardian site uses some Flexbox</figcaption>
</figure>

<p>
The benefit to newspaper layouts and ad units is the ability to order and align. This is just a conceptual idea, and maybe it's stupid in practice - but imagine a system that detects that you don't ever read the sport section - well it can reorder sport toward the bottom of the page and maybe push world news toward the top.
Being able to reorder sections could add simple reader preference reorganization. This is made incredibly simple with Flexbox.
</p>

<h3>Multi-column layouts</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_googlenow.png" alt="Google now"/>
<figcaption class="caption-below">Google now Multi column layout</figcaption>
</figure>

<p>If like me, you thought CSS columns would give you this, and then gave you nothing but broken content blocks - this is one way we can split up a list over multiple columns without having to split up the list in markup.</p>

<h3>Dashboards</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_fitbit.png" alt="Fitbit Dashboard"/>
<figcaption class="caption-below">The Fitbit Dashboard</figcaption>
</figure>

<p>Dashboards offer us another case for ordering, but also could benefit from column wrapping, or equal height columns.</p>

<h2>Embracing change</h2>

<p>
Flexbox aims to solve layout problems that we've hacked to achieve, it allows us to embrace the variable nature of both content and design. It also allows us to accomodate design requests which seem simple to someone who doesn't build, but results in either way too much time, us writing completely unsemantic markup, or way too much code to seem worthwhile. In the future, we'll have more tools like CSS Grid, but for now Flexbox is ready and waiting to be used right now, and we no longer have to bash every layout with the rusty old hammer we've been using for 13+ years.
</p>

<h3>Content is flexible</h3>

<p>
Content is inherently flexible, in the past weâve designed, built and approached fitting the content to the design rather than fitting the design and build to the content. Even today, we impose restrictions based on build constraints, when we should be relying on the content strategists to impose these restrictions, not the developers.
</p>

<h3>We don't always have control</h3>

<p>
Content management systems are a prime example of where we cede control on layout flexibility - we are often designing with limited knowledge of what content will be within a space. We can achieve things by all kinds of hackery, or we can impose certain rules - but we lose that flexibility when we do.
Some of our approaches to achieving things visually cause us to abandon markup that makes sense and when we stop building in way that makes sense we have to work really hard to make them accessible.
</p>

<h3>More design tools</h3>

<p>
Design often informs what we build and how we build, but so do the tools and constraints of development inform the capabilities of what can be designed. Ideally, a more mature understanding of Flexbox will have us creating better quality, and more varied designs.
</p>

<h3>Bend and break</h3>

<p>
It's not until we fully understand something that we can start to bend it beyond its original purpose to achieve something greater, how we break it influences how we make it.
</p>

<p>
Today, we know the basic rules of Flexbox and what that can do to today's layouts, with education we can influence entirely new layouts, and it won't be until we see Flexbox used in combination with some of the other lesser used, or newer features that we will really start to see the possibilities appear.
</p>

<h2>Strategy for Flexbox</h2>

<p>
To make Flexbox easier to adopt, I decided to look at some of the key criteria in which would make it easy to do so.
</p>

<h3>Build the way we always did</h3>

<p>
We should be able to look at just about any project that weâve done in the past year and add a piece of code and reap the benefits of Flexbox. We should be able to build a new project tomorrow the way we always did, then add some code that will make Flexbox work and make layouts better.
</p>

<p>
Using a library like Modernizr we can put the new flexbox code behind .flexbox, and optionally put any layout specific to floats (float:left, width:33% etc) behind .no-flexbox so that we can one day phase it out.
</p>

<h3>Minimize code</h3>

<p>
Managing 3 syntaxes plus float layouts just to enable Flexbox is madness. Using an autoprefixer is an integral part of the Flexbox adoption strategy.
</p>

<h3>Make it worthwhile</h3>

<p>
We need our layouts to benefit from Flexbox otherwise we're throwing unnecessary code at a layout for the sake of it. The obvious ones of these involve vertical centering, columns matching their ends, and ordering.
</p>

<h3>Cut the mustard: Flex-wrap</h3>

<p>
Flex-wrap is the point at which Flexbox often becomes useful, it's not necessary for all of these enhancements, but it's the point at which I choose to enhance Flexbox from to prevent layout issues. Fortunately, the Modernizr library's ‘.flexbox’ has flex-wrap as part of its detection, so if you use .flexbox you'll be cutting out browsers which don't support flex-wrap.
</p>

<p>
I've seen talk of people using @supports here, but that cuts out way too many browsers, either write your own feature detection or just use Modernizr.
</p>

<h2>Enhancing with Flexbox</h2>

<p>
To better explain how easy it is to modify existing layouts to flexbox here are two experimental layout enhancements - one with the Card Pattern and one with the Split screen pattern.
</p>

<div class="demo-container t-purple-dark js-demo switch-flexbox">
<div class="demo-control">
<p class="demo-heading">
<h2 class="subheading" id="feature-example">
Example 1: Card layout with list
</h2>
</p>

</div>
<figure class="demo-display l-fullheight">
<ul class="d-flex-card-list js-flex-card-list js-flex-card-justify-flex-start js-flex-card-flexy-no">
<li>
<div class="d-flex-card">
<div class="d-flex-card-image">
<img src="http://chriswrightdesign.com/img/placeholder.jpg"/>
</div>
<div class="d-flex-card-content">
<h3>First</h3>
<p>I'm a card and I'm first.</p>
<a href="#" class="d-flex-card-button">
Button
</a>
</div>
</div>
</li>
<li>
<div class="d-flex-card">
<div class="d-flex-card-image">
<img src="http://chriswrightdesign.com/img/placeholder.jpg"/>
</div>
<div class="d-flex-card-content">
<h3>Second</h3>
<p>I'm a card</p>
<p>I'm some extra content put here to make life more difficult, because I can.</p>
<a href="#" class="d-flex-card-button">
Button
</a>
</div>
</div>
</li>
<li>
<div class="d-flex-card">
<div class="d-flex-card-image">
<img src="http://chriswrightdesign.com/img/placeholder.jpg"/>
</div>

</div>
</li>
<li>
<div class="d-flex-card">
<div class="d-flex-card-image">
<img src="http://chriswrightdesign.com/img/placeholder.jpg"/>
</div>
<div class="d-flex-card-content">
<h3>Fourth</h3>
<p>Dreamcatcher PBR iPhone seitan viral, DIY Truffaut biodiesel slow-carb. Health goth twee migas, messenger bag irony tilde chillwave cold-pressed listicle bespoke Schlitz readymade.</p>
<a href="#" class="d-flex-card-button">
Button
</a>
</div>
</div>
</li>
<li>
<div class="d-flex-card">
<div class="d-flex-card-image">
<img src="http://chriswrightdesign.com/img/placeholder.jpg"/>
</div>
<div class="d-flex-card-content">
<h3>Fifth</h3>
<p>Shabby chic put a bird on it normcore, irony Shoreditch street art hella post-ironic 3 wolf moon fashion axe flexitarian semiotics tote bag. Artisan sriracha aesthetic, Vice Odd Future flannel quinoa disrupt letterpress Banksy selvage.</p>
<a href="#" class="d-flex-card-button">
Button
</a>
</div>
</div>
</li>
</ul>
</figure>
</div>

<h3>How flexbox makes it better</h3>

<p>
We've had a way to layout something like this using floats, but every item is going to appear a different height, so you have to impose a minimum or fixed height to every item to achieve equal height columns, and having the button anchor to the bottom you'd have to make it position absolute, and then pad out the card at the bottom.
</p>

<p>
Once you've done all this, all you have to do is change your screen width to something more narrow where you need the collapse to happen to feel the pain of the monster you've just created. Lots of changing min-heights or your fixed height, and all someone needs to do is add a bit more content than you designed for and you're in a world of hurt.
</p>

<p>
Flexbox solves this, we build the layout how we would have without setting those restrictions (so the columns aren't equal height), add Flexbox and we get all the alignment goodness in just about every modern browser.
</p>

<h3>Step 1: Markup structure</h3>

<p>
I look at this pattern as an unordered list of cards, a card is its own module that lives within a list item.
</p>

<p>
Inside that card are several items of content (image, heading, paragraphs, button). By personal preference of how I might like to stretch the content horizontally on different screens I seperate the content from the image so they can live side by side on float layouts.
</p>

<p>
As I mentioned previously, I'm building how I would've built without Flexbox, it shouldn't really affect my markup structure.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-markup">
&lt;!-- card list --&gt;
&lt;ul class="flex-card-list"&gt;
    &lt;!-- card list item --&gt;
    &lt;li class="flex-card-listitem"&gt;
        &lt;!-- card module --&gt;
        &lt;div class="flex-card"&gt;
            &lt;!-- image container --&gt;
            &lt;div class="flex-card-image"&gt;
                &lt;img src="http://chriswrightdesign.com/img/placeholder.jpg" /&gt;
            &lt;/div&gt;
            &lt;!-- content container --&gt;
            &lt;div class="flex-card-content"&gt;
                &lt;h3 class="flex-card-heading"&gt;First&lt;/h3&gt;
                &lt;p&gt;I'm a card and I'm first.&lt;/p&gt;
                &lt;a href="#" class="flex-card-button"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
                        </code>
                    </pre>

<h3>Step 2: Styling the list</h3>

<p>
On the unordered list we add display:flex, any time we use display:flex we're saying we want to do something with the child elements of that element, in this case our aim is to get the list items to be the same height. Flex will by default stretch items vertically, and lay out on a row. Stretching the list items is the first step to getting the nested items to stretch to the same size.
</p>

<p>
Our list of cards is going to exist on more than one line/row, so we need to use flex-wrap to tell the items to wrap to the next line when they hit the edge of the container.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
/* Put behind .flexbox for Feature detection with Modernizr */
.flexbox .flex-card-list {

    display:flex;
    flex-wrap:wrap;

}
                        </code>
                    </pre>

<h3>Step 3: Styling the list items</h3>

<p>
We add display:flex to the list items because we want the card modules to be controllable with flexbox.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">

.flexbox .flex-card-listitem {

    display:flex;

}
                        </code>
                    </pre>

<h3>Step 4: Media queries</h3>

<p>
At this point, we add media queries for different screen widths. My layout will go three cards per row, two cards per row, then one card per row.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
/* Code to adjust the layout to 2 cards per row */
@media all and (min-width:40em) {

    /* Float layout */
    .flex-card-list li {
        width:50%;
    }
    .no-flexbox .flex-card-list li {
        float:left;

    }

}
/* Code to adjust the layout to 3 cards per row */
@media all and (min-width:40em) and (max-width:60em) {

    /* Clears the row for 2 item per row layout */
    .no-flexbox .flex-card-list li:nth-child(2n+1) {
        clear:both;
    }
}
@media all and (min-width:60em) {

    //common
    .flex-card-list li {
        width:33.33%;
    }

    /* Float specific: Clear after every third item */
    .no-flexbox .d-flex-card-list li:nth-child(3n+1) {
        clear:both;
    }


}
                        </code>
                    </pre>

<h3>Step 5: The card module</h3>

<p>
We now have a list of objects that change their layout based on media queries, and each item is stretching to the height of the list items. Equal height columns are here, but our buttons are anchored to the paragraph, not to the bottom of the card modules. By adding display flex to the card module we can now use flex to control the image and the content block. We'll also add flex-direction column, since we want to treat it as a full height column.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
.flexbox .flex-card {

    display:flex;
    flex-direction:column;

}
                        </code>
                    </pre>

<h3>Step 6: The card content</h3>

<p>
We need to put display:flex on one more item, the card content div, this is so we can control its elements, set its direction to column to let it know we want to use a tube of content and add flex:1 0 auto (thw grow is the important part) to it to let it know to grow to fill the remaining space left behind.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
.flexbox .flex-card-content {

    display:flex;
    flex:1 0 auto; /* We have to add a basis for IE10/11 */
    flex-direction:column;

}
                        </code>
                    </pre>

<h3>Step 7: Flexible paragraphs</h3>

<p>
It's up to you what you choose to make flexible within the content block, I would use the most variable item, the paragraphs, to grow to fill (add flex:1 0 auto). This will now stretch the bottom of the paragraph and pin the button to the bottom of the card.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
.flexbox .flex-card-content p {

    flex:1 0 auto; /* We have to add a basis for IE10/11 */

}
                        </code>
                    </pre>

<div class="demo-container t-purple-dark js-demo switch-flexbox" id="example2">

<figure class="demo-display l-fullheight l-fullwidth">
<div class="d-flex-split js-flex-split js-flex-align-center js-order-finn">
<div class="d-flex-split-left">
<div class="d-flex-split-image">
<img src="http://chriswrightdesign.com/experiments/img/adventure1.png"/>
</div>
<h3>Finn the human</h3>
<p>Finn (full title: Finn the Human, or Finn Mertens, and formerly known as Pen in the original short), is the main protagonist of the series Adventure Time.
</p>
<a class="d-flex-split-link" href="http://adventuretime.wikia.com/wiki/Finn">Learn more</a>
</div>
<div class="d-flex-split-right js-flex-split-jake">
<div class="d-flex-split-image">
<img src="http://chriswrightdesign.com/experiments/img/adventure2.png"/>
</div>
<h3>Jake the dog</h3>
<p>Jake (full title: Jake the Dog), the deuteragonist of Adventure Time, is a magical dog and Finn's constant companion, best friend, and adoptive brother.</p>
<a class="d-flex-split-link" href="http://adventuretime.wikia.com/wiki/Jake">Learn More</a>
</div>
</div>
</figure>
</div>

<h3>How flexbox makes it better</h3>

<p>
There are a number of approaches one could take to make the split screen layout work - once again we could rely upon a grid row, we could give a minimum height to both items, or we could use the position absolute approach and hook the items to their respective directions (left:0, bottom:0, top:0 etc). Or we could just say be 100vh high, and 50vw wide and ignore how much content there is and throw another div around that content and try to center position that div within its box.
</p>

<p>
The problem to all of these approaches is that we need to dictate a height at some point. Like the previous layout problem - setting minimum heights is problematic across screen sizes (although not such a problem when your layout becomes single column).
</p>

<p>
Adding flexbox solves this and gives us some tools to align all of the content within the container, while allowing the content to dictate the size of the container. You can align it vertically or horizontally any way you like - including the centering it vertically.
</p>

<p>
If we wanted to reorder the children, we can do that too without having to move the items in the DOM.
</p>

<p>
Note: Keyboard control can be an issue when you go down the order path, so iâd say do it sparingly, and probably for larger items that donât create too much of a jarring experience rather than on smaller items that need lots of tab key presses to get through so your users arenât jumping all over the screen with the tab key. Consider keyboard users.
</p>

<h3>Step 1: Markup</h3>

<p>
The structure of this experiment is one div (parent), with two divs (children), if there were more than two I'd probably consider this an unordered list - but as there are only two divs will suffice.
</p>

<p>
Inside of each content panel we have an image, a heading, a paragraph, and a link, which we'll use Flexbox to align.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-markup">
&lt;!-- Split layout parent --&gt;
&lt;div class="flex-split"&gt;
    &lt;!-- Child divs --&gt;
    &lt;div class="flex-split-left"&gt;
        &lt;!-- Putting the image in a div here is totally optional --&gt;
        &lt;div class="flex-split-image"&gt;
            &lt;img src="jake.png" /&gt;
        &lt;/div&gt;
        &lt;h3&gt;Jake the dog&lt;/h3&gt;
        &lt;p&gt;Etc etc etc&lt;/p&gt;
        &lt;a href="link.html"&gt;Read more&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="flex-split-right"&gt;
        &lt;!-- Etc, etc etc --&gt;
    &lt;/div&gt;
&lt;/div&gt;

                        </code>
                    </pre>

<h3>Step 2: Parent div</h3>

<p>
For the non-flexbox layout I'm using a minimum VH height (this won't work in IE8, so if you want it to work in IE8 you'll probably need to set a height with a unit which works in IE8). For this float layout, you're going to have to micromanage media queries as the screen gets narrower to deal with the content. We'll also need position:relative, so that we can absolutely position the child elements.
</p>

<p>
For flexbox we add display:flex, once again indicating that we will use Flexbox to work with the child elements. You won't need to micromanage media queries here as Flexbox will just modify the container as the screen narrows.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
/* No flexbox layout with position relative and a minimum height */
.no-flexbox .flex-split {
    position:relative;
    min-height:80vh;
}

/* Adding Flexbox, switch to rows and wrap at 48em */
.flexbox .flex-split {
    display:flex;
    flex-direction:column;
}
@media all and (min-width:48em) {
    .flexbox .flex-split {
        flex-flow:row wrap;
    }
}

                        </code>
                    </pre>

<h3>Step 3: Child elements</h3>

<p>
For our non-flexbox layout we'll float the two child divs, give them a width of 50%, position them absolutely and anchor them to their sides.
</p>

<p>
For our flexbox layout we'll just add a flex-basis of 50%, and pick a point where they collapse on a smaller screen and make that flex-basis 100% (and if you don't really need flexbox on the small screen you could just allow it to be displayed as a stacking block element).
</p>

<p>
We need to change the flex-direction here to column to let Flexbox know to lay it out like a tube of vertical content. (although alternatively you could also use row with wrap, but it seemed to require more code to make work so I stuck with column). We also add display:flex to this element because we want to use Flexbox to position each of the content elements.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
/*
    For no flexbox - give the child elements a minimum height and position them top and bottom
    at 48ems make them float, otherwise just let the content fill the blocks on a small screen
*/

@media all and (min-width:48em) {
    /* Common to both */
    .flex-split &gt; div {
        width:50%;
    }
    .no-flexbox .flex-split &gt; div {
        min-height:50vh;
        top:0;
        bottom:0;
        float:left;
        position:absolute;


    }
    /* Anchor to their respective sides  */
    .no-flexbox .flex-split-left {
        left:0;
    }
    .no-flexbox .flex-split-right {
        right:0;
    }

}

/* For Flexbox - make the direct descendant divs content displayed in columns */
.flexbox .flex-split &gt; div {

    display:flex;
    flex-direction:column;


}

                        </code>
                    </pre>

<h3>Step 4: Aligning the content with Flexbox</h3>

<p>
If, like me, you thought at this point that align-items: center would make the content center vertically, you'd be wrong. When you change the axis that Flexbox works off, the property you use to work with the vertical axis changes. The property that works now is justify-content.
</p>

<p>
To center the content within the child divs, just add justify-content:center, and if you wanted you could also reorder, or align the content in any way you saw fit.
</p>

<pre class="codeblock js-code-is-hidden">
                        <code class="language-css">
/* Use flexbox to vertically center align */
.flex-split &gt; div {

    justify-content:center;
        /* I needed to do this in IE10/11 to get it to horizontally center */
    align-items:center;


}
                        </code>
                    </pre>

<h2>Troubleshooting Flexbox</h2>

<h3>
Axis direction (flex direction)
</h3>

<p>
When alignment doesn't seem to be doing anything, it's probably because you switched axis flex-direction from row to column. Align-items and Justify-content both rotate with the flex-direction. It took me putting borders around everything to discover this.
</p>

<h3>Flex items horizontal off the page</h3>

<figure class="figure-contained">
<img src="http://chriswrightdesign.com/experiments/img/screenshot_flexbox-overflowing.png" alt="Flexbox overflowing problem"/>
<figcaption class="caption-below">Flex items horizontal off page</figcaption>
</figure>

<p>
When items are horizontally overflowing the page, you probably need to add flex-wrap:wrap, or you're looking at the responsive imagery problem again.
</p>

<p>
When I first started using Flexbox I was throwing Autoprefixer at things assuming that if Flexbox wasn't present that would be okay, it wasn't until I started testing on my older Android devices that I realized that even if a device was Flexbox capable, it didn't make it Flex-wrap capable - which was another reason I encountered this issue.
</p>

<h3>Inflexible imagery</h3>

<p>
One of the problems I came across when practicing flexbox was what happens when you use a flexible image within a flexbox container. This had to be my number one gripe - and it seemed to happen in EVERY browser.
</p>

<p>
You might see this if you were setting your flex values in a row to something like flex:0 0 25%, and for some reason your rows are clearing on every 3rd item instead of every 4th item. Or worse your items are just flying off the page. It's because the image won't shrink. Applying flex-shrink won't help anything either.
</p>

<p>
The problem is that while Flexbox seems to honor Max-width's maximum width, it doesn't recognize that a maximum-width:100% image is flexible and can scale down in size. That isn't entirely true. It's not that it doesn't recognize the image is scalable. This is actually because a block element will dictate the size of the image within. A flex element will try to resize itself to the size of the maximum image size.
</p>

<h4>The workaround</h4>

<p>
The workarounds for this are to either set the maximum width that you are okay with the image being in a unit other than a percentage. Or if you want it to be completely flexible - set it to 100%, with the obvious drawback of that image having the capability of going way too large.
</p>

<h3>Understanding space-around and space-between</h3>

<p>
I'm hoping my experiment has cleared it up a bit, it was a common one that got me. These are both calculated automatically, so if you want control don't use them.
Space-around pins items from the centre and gives an even amount of spacing around any item within a flex container. So if there are two items, they'll both be equal distance from the sides and from each other. Think of it as inside-out.
</p>

<p>
Space-between makes items pin to the outside of the container, then calculates an even amount of space between every item, think of it as outside-in.
If you wanted that to be a fixed amount of padding or margin, then space-between isn't your choice, you should use flex-start.
</p>

<h3>
How grow and shrink work
</h3>

<p>
This one's a more basic mistake, I imagine most people wouldn't run into - if you don't want your flex items to become huge, don't grow them. The nth-child selector can help you organize this a bit better if you only want to grow the last item on every row.
</p>

<p>
My basic rule is: I use grow if I want something to fill the space of a missing item, I use shrink if I want items to collapse to make way for new items.
</p>

<h3>
Items become many tiny columns
</h3>

<p>
Another fairly common one, you're looking at a row without row-wrap. Either make the container a column, or a row with row-wrap.
</p>

<h3>
IE 10/11 only: Wrapping too early, items too big
</h3>

<p>
Thanks to the Flex-bugs git repo I was able to debug this one pretty quick, I thought I'd mention it here because it was a HUGE spanner in the works for me. This is caused by using Flex-basis and Padding together. Flexbox won't accept the border-box box model properly, so to avoid this, use flex-basis auto and just use a standard width. The plus side of this is less code between floats and flexbox.
</p>

<h3>IE10/11 only: the heights are oddly collapsed</h3>

<p>
When I was creating my card pattern, I found the button was collapsing into the paragraphs - this is another bug documented on flexbox which caused me pain. As good as it feels to flex:1, just don't do it. Instead save yourself the panic by writing the full shorthand Flex:1 0 auto or flex:1 0 0.
</p>

<h3>FF: column-reverse and overflow-y</h3>

<p>
Thanks to Sean Curtis for helping me discover this one, it turns out it's already logged as a bug with Mozilla. If you use flex-direction:column-reverse with an element that uses overflow-y:auto, you won't see a scrollbar appear at all. It looks like this is in the process of being resolved.
</p>

<h3>
Well documented cross-browser bugs
</h3>

<p>
If you come across bugs that aren't listed here, it might be worthwhile checking out Philip Walton's <a href="http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/">normalizing cross-browser flexbox bugs</a> which points out a whole bunch that he came across that are specific to certain browsers. Or just check out the <a href="https://github.com/philipwalton/flexbugs">Git repo</a> which lists two of the bugs I mentioned here earlier. I constantly clashed with bugs 4, 5, and 7 from that list.
</p>

<h2>Add flexbox to your layouts</h2>

<p>
I'm keen to see how people add Flexbox to improve their layouts,
I am using Flexbox on production projects without the fear I used to have. I use it in small parts, testing small scale modules and working my way up. This strategy allows me to be certain that I'm not trashing a site for browsers that don't support it.
</p>

<p>
Having a strategy to approaching and implementing Flexbox is fairly crucial in successfully including it. Without a clear strategy going, starting from Flexbox and working backwards is akin to trying to dig yourself out of a hole.
</p>

<p>
If you're not all that confident with Flexbox, I'd recommend just having a play with recreating existing components - look at interesting layouts on gallery sites like <a href="http://www.dribbble.com">Dribbble</a>, <a href="http://www.paterntap.com">Pattern Tap</a>, or <a href="http://www.awwwards.com">Awwwards</a> and see how Flexbox can improve them. After the initial hours of headbutting your keyboard repeatedly, you'll see that it's actually pretty easy. Hopefully what I've written here will save you from the keyboard imprint on your face.
</p>

<p>
Got any great new applications of Flexbox that you're able to enhance from your standard layouts? Or are you already using Flexbox on your site? let me know! I'm interested in what people are doing with it.
</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://chriswrightdesign.com/experiments/using-flexbox-today/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>