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

drop support for IE8

Twitter : Drop support for IE8 in January 2015
Microsoft : Office 365 unusable with IE8
Yahoo : Internet Explorer 8 no longer supported
Google : Internet Explorer 8 support discontinued
Facebook : Discontinuing IE 8 Support in React DOM

Ni Facebook,ni Twitter,ni Microsoft,ni Yahoo,ni Google,ni Applene 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 8 IE 9 PlayTV 0.8% 1% VDM 1% 1% BetaSeries 0.001% 0.002%

Stats France Mars 2015

PlayTV : plus de 6 millions de visites mensuelles - 8e sites le plus visités au Classement CybereStat des sites souscripteurs de l’étude Médiamétrie-eStat en décembre 2012

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 vraimentsupporter 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

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

.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

@harrisfreddy

Freelance Front-end

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

flexbox – it's time to use it!

Freddy03h

flexbox – it's time to use it!

1 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

flexbox-presentation

flexbox

CSS Flexible Box Layout

it's time to use it!

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 Applene supportent IE8.

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

Websites français grand public

Tools

syntaxe 2009

syntaxes 2011

syntaxes 2012

ô_Ø

Autoprefixer

Plugin du Postprocessor PostCSS

Je dois vraimentsupporter IE…

Flexibility

Polyfill

Modernizr

Feature detection

CSS

display: flex

flex-direction

flex-direction

order

order

justify-content

center

justify-content

space-between

justify-content

space-around

align-items

stretch

align-items

center

align-self

margin

margin

margin

flex-grow

flex-grow

flex-shrink

flex-shrink

flex-shrink

flex-shrink

flex-basis

flex-basis & flex-grow

flex-basis & flex-shrink

flex

min-width & max-width

flex-wrap

use cases

Lorem ipsum

Dolore

Lorem ipsum

Dolore

grid of images

Firefox 37 - 43

Firefox 37 - 43

Internet Explorer 11

Flexbugs

✓ Firefox & IE 11

References

Merci

1 1