flexbox

CSS Flexible Box Layout


it's time to use it!

Freddy Harris / @harrisfreddy

about me

Previously

Mobile web developer

Previously

Lead Front end developer

Projet personnel

Browsers

caniuse.com

caniuse.com

drop support for IE8

Ni Facebook,
ni Twitter,
ni Microsoft,
ni Yahoo,
ni Google,
ni Apple
ne supportent IE8.

Votre site a-t-il besoin d’être optimisé pour IE8 ?

@HTeuMeuLeu

http://breakupwithie8.com

Stats France Decembre 2015

Websites français grand public

IE 8IE 9
PlayTV0.8%1%
VDM1%1%
BetaSeries0.001%0.002%

Stats France Mars 2015

  • Internet Explorer 11 is the last version of Internet Explorer.
  • It means you should take action. After January 12, 2016, Microsoft will no longer provide security updates or technical support for older versions of Internet Explorer.

Tools

syntaxe 2009


.container {
    display: -webkit-box; /* Safari 3 to 7, Chrome 4 to 20, Android Browser */
    display: -moz-box /* Firefox 2 to 21  */;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;

    -webkit-box-align: start;
    -moz-box-align: start;
}
.item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}
          

syntaxes 2011


.container {
    display: -ms-flexbox; /* IE 10 */

    -ms-flex-flow: row;

    -ms-flex-align: start;
}
.item {
    -ms-flex: 1;
}
          

syntaxes 2012


.container {
    display: flex; /* since Chrome 29, Firefox 22, Safari 9 and IE11 */
    display: -webkit-flex; /* Safari 7 to 8 and Chrome Android 4.4 */

    flex-direction: row;
    -webkit-flex-direction: row;

    align-items: flex-start;
    -webkit-align-items: flex-start;
}
.item {
    flex: 1;
    -webkit-flex: 1;
}
          

ô_Ø


.container {
    display: -webkit-box; /* Safari 3 to 7, Chrome 4 to 20, Android Browser */
    display: -moz-box /* Firefox 2 to 21  */;
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex; /* Safari 7 to 8 and Chrome Android 4.4 */
    display: flex; /* since Chrome 29, Firefox 22, Safari 9 and IE11 */

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-flow: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
          

Autoprefixer

Plugin du Postprocessor PostCSS

Il suffit de lui indiquer les navigateurs à supporter

  • browsers: ['> 1%', 'IE 10']
  • browsers: ['last 2 versions', 'Firefox >=10']

Meilleur support des syntaxes Flexbox que Compass

Il existe déjà beaucoup de plugins : Grunt, Gulp, Webpack, Less, Stylus, Rails …

Je dois vraiment
supporter IE…

Flexibility

Polyfill

Compatibilité Flexbox pour IE8 & IE9


.container {
    -js-display: flex;
    display: flex;
}
          

Modernizr

Feature detection

Ajoute des classes sur l'élément html


.no-flexbox.no-flexboxlegacy {

  /* fallback */

}
          

CSS

display: flex



.container {
    display: flex;
    /* flex-direction: row; */
}
          

flex-direction


.container {
    display: flex;
    flex-direction: column;
}
          

flex-direction


.container {
    display: flex;
    flex-direction: row-reverse;
}
          

order

À appliquer sur les flex-item, par defaut la valeur est à 0.


.item:nth-child(5) {
    order: -1;
}
.item:nth-child(2) {
    order: 1;
}
          

order

L'ordre dans le DOM défini l'ordre pour les flex-items de même order


.item:nth-child(4) {
    order: 1;
}
.item:nth-child(2) {
    order: 1;
}
          

justify-content

center


.container {
    display: flex;
    justify-content: center;
}
          

justify-content

space-between


.container {
    display: flex;
    justify-content: space-between;
}
          

justify-content

space-around


.container {
    display: flex;
    justify-content: space-around;
}
          

align-items

stretch


.container {
    display: flex;
    height: 200px;
    /* align-items: stretch; */
}
          

align-items

center


.container {
    display: flex;
    height: 200px;
    align-items: center;
}
          

align-self


.container {
    display: flex;
    height: 200px;
    align-items: flex-end;
}
.item:nth-child(3) {
    align-self: stretch;
}
          

margin


.container {
    display: flex;
    height: 200px;
}
.item:nth-child(3) {
    margin-left: auto;
}
          

margin


.container {
    display: flex;
    height: 200px;
}
.item:nth-child(1) {
    margin-right: auto;
}
.item:nth-child(3) {
    margin-left: auto;
}
          

margin


.container {
    display: flex;
    height: 200px;
}
.item {
    margin: auto;
}
          

flex-grow

Attribution de l'espace restant


.container {
    display: flex;
}
.item:nth-child(4) {
    flex-grow: 1;
}
          

flex-grow


.container {
    display: flex;
}
.item:nth-child(4) {
    flex-grow: 1;
}
.item:nth-child(5) {
    flex-grow: 2;
}
          

flex-shrink

Contraction par rapport à l'espace manquant


.container {
    display: flex;
}
.item {
    /* flex-shrink: 1; */
}
          

flex-shrink


.container {
    display: flex;
}
.item {
    flex-shrink: 0;
}

          

flex-shrink


.container {
    display: flex;
}
.item {
    flex-shrink: 0;
}
.item:nth-child(7) {
    flex-shrink: 1;
}

          

flex-shrink


.container {
    display: flex;
}
.item {
    flex-shrink: 0;
}
.item:nth-child(7) {
    flex-shrink: 1;
}
.item:nth-child(8) {
    flex-shrink: 2;
}

          

flex-basis

Taille avant redistribution d'espace


.container {
    display: flex;
}
.item {
    flex-basis: 150px;
}
          

flex-basis & flex-grow


.container {
    display: flex;
}
.item {
    flex-basis: 150px;
}
.item:nth-child(1) {
    flex-grow: 1;
}
          

flex-basis & flex-shrink


.container {
    display: flex;
}
.item {
    flex-basis: 150px;
    flex-shrink: 0;
}
.item:nth-child(5) {
    flex-shrink: 1;
}
          

flex


.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

/* équivaut à */

.item {
    flex: 1 1 auto;
}
          

@standardista

min-width & max-width


.container {
    display: flex;
}
.item {
    flex: 1 0 150px;
}
.item:nth-child(2) {
    min-width: 250px;
}
.item:nth-child(4) {
    max-width: 50px;
}
          

flex-wrap


.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 1 0 150px;
}
          

use cases


h3 {
    display: flex;
    align-items: center;
}
h3::before,
h3::after {
    content: "";
    border-bottom: solid black 1px;
    flex-grow: 1;
}
          

Lorem ipsum

Dolore

Lorem ipsum

Dolore


Scheduled Campaign
April 6, 2015 to April 15, 2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed diam neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia nisl augue, eget pretium odio posuere et. Maecenas lorem mauris, sollicitudin eget dapibus eu, venenatis et neque.

.media {
  display: flex;
}
.media-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.media-image {
  flex-shrink: 0;
}
.media-name {
  flex: 1 0 auto;
}
.media-text {
  flex: 1 0 100%;
}
          
Scheduled Campaign
April 6, 2015 to April 15, 2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed diam neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia nisl augue, eget pretium odio posuere et. Maecenas lorem mauris, sollicitudin eget dapibus eu, venenatis et neque.

grid of images

Images can have different sizes

Ratio 2:3


Assassination Classroom Tome 8

.manga-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px;
  justify-content: space-around;
}

.manga-item {
  background-color: yellow; // pour mieux comprendre
  margin: 10px;
}

.manga-item__image {
  max-height: 300px;
}
          

.manga-item {
  flex: 0 0 200px;
}
          

.manga-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
          

.manga-item__image {
  max-width: 100%;
}
          

Firefox 37 - 43

Firefox 37 - 43


.manga-item {
  flex: 0 0 200px;
  max-width: 200px; //fix bug firefox
}
          

Lien du CodePen

Internet Explorer 11

Flexbugs


Assassination Classroom Tome 8

.manga-item__place-image {
  max-width: 100%;
  flex: 0 0 auto;
}

.manga-item__image {
  display: block;
}
          

✓ Firefox & IE 11

Lien du CodePen

References

Merci

Freelance Front-end

React.js • Mobile First • Hybrid & Progressive Web Apps