Résultats du Quiz CSS Flexbox

À partir de quelle version d'Internet Explorer, Flexbox est-il supporté ?

• IE8
• IE9
• IE10
• IE11
• Edge

Flexbox est reconnu à partir de IE10, pensez à consulter le célèbre site Caniuse si vous avez un doute sur la compatibilité d'une fonctionnalité HTML ou CSS : http://caniuse.com/#feat=flexbox

Quelle propriété de Flexbox existe vraiment ?

• flex-wrap
• corn-flex
• re-flex
• tarti-flex
• circon-flex

A-t-on vraiment besoin d'explications ?

Quelle est l'orientation par défaut au sein d'un flex container ?

• horizontale
• verticale
• diagonale
• perpendiculaire
• contondante

La direction au sein d'un flex-container est fixée par la propriété flex-direction dont la valeur par défaut est "row", donc horizontale

Dans la propriété raccourcie flex: 1 0 auto; à quelle propriété se réfère la 2è valeur (ici 0) ?

• à flex-grow
• à flex-shrink
• à flex-basis
• à flex-flow

La propriété flex est un raccourci de ces trois propriétés, dans l'ordre ; flex-grow, flex-shrink, flex-basis.

Quelle est la valeur par défaut de flex-flow ?

• auto
• normal
• row nowrap
• row wrap
• row no-wrap

flex-flow est une propriété raccourcie de deux propriétés, flex-direction et flex-wrap, dont les valeurs par défaut sont respectivement row et nowrap

Quelle déclaration de Flexbox n'existe pas ?

• align-items: space-between;
• justify-content: space-between;
• align-content: space-between;
• display: inline-flex;
• align-self: auto;

La valeur "space-between" n'existe pas pour la propriété align-items

Trouvez l'intrus :

• justify-content: flex-start;
• align-items: flex-start;
• align-content: flex-start;
• align-self: flex-start;

align-self est la seule propriété qui s'applique sur un flex-item, les autres s'appliquent toutes sur un flex-container

Si ces deux déclarations sont appliquées sur un flex item, quelle sera sa largeur ?
width: 500px; flex-basis: 250px;

• 250px
• 500px
• 750px
• 1250px
• auto

lorsque flex-basis est renseigné (valeur autre que "auto") alors il écrase la valeur de la propriété width

Si ces trois déclarations sont appliquées sur un flex item, quelle sera sa largeur ?
width: 500px; flex-basis: 250px; min-width: 750px;

• 250px
• 500px
• 750px
• 1250px
• auto

la propriété min-width l'emporte systématiquement sur toutes les autres propriétés

Si toutes ces déclarations sont appliquées sur un flex item, quelle sera sa largeur ?
width: 500px; flex-basis: 1250px; min-width: 750px; flex-shrink: 0;

• 250px
• 500px
• 750px
• 1250px
• auto

flex-basis l'emporte sur width et ne contredit pas min-width, la largeur finale sera donc 1250px.