DokuWiki cffl

cffl:additional_resources

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T17:54:52+00:00

<- Solution - Controlling display order -> * w3.org/TR/css3-flexbox * canisuse.com/flexbox * wiki.csswg.org/spec/flexbox-2009-2011-spec-property-mapping * MSDN Flexible box (“flexbox”) layout msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx * css-tricks.com/old-flexbox-and-new-flexbox

cffl:aligning_multiple_lines

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T16:02:48+00:00

<- Flex item marginsChallenge - Aligning flex items -> La propriété align-content permet de contrôler l'alignement des lignes multiples d'un élément flex, lorsque l'on utilises le wrap. -> w3.org/TR/css3-flexbox/#align-content-stretch * align-content * flex-end * flex-start * space-around

cffl:aligning_single_items

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T15:21:36+00:00

<- Cross-axis alignmentFlex item margins -> align-self similaire à align-items mais applicable à un élément enfant.

cffl:challenge_-_aligning_flex_items

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T16:29:13+00:00

<- Aligning multiple linesSolution - Aligning flex items -> alignement à droite dans le cas d'un row On utilise pas une propriété flex en soi mais la manière dont flexbox gère le auto comme valeur de marge extérieure. /* alignement à droite d'un élément dans un conteneur flex réglé en flex-start (par défaut).*/ selecteur { margin-left: auto; margin-right: 1em; }

cffl:challenge_-_controlling_display_order

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T17:51:25+00:00

<- Nesting flex containersSolution - Controlling display order -> Uses order.

cffl:challenge_-_creating_element_flexibility

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T19:52:30+00:00

<- Defining display ratiosSolution - Creating element flexibility -> créer un conteneur flex -> lui appliquer la propriété display:flex; le régler en row ou column -> lui appliquer flex-flow:column|row; régler de manière basique les ratios entre columns -> avec la propriété flex:;

cffl:content_wrapping

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:37:45+00:00

<- Understanding flex axesChallenge overview -> Par défaut les conteneur flexbox ont une ligne (single-line) et alignent tous les éléments enfants sur une seule ligne. Pour changer ce comportement, on utilise la propriété flex-wrap. ms-flex-wrap:;/* vieux nav ms */ flex-wrap:nowrap|wrap|wrap-reverse;

cffl:controlling_element_flexibility

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T19:25:20+00:00

<- Understanding the flex propertyDefining display ratios -> * w3.org/TR/CSS3-flexbox/#flex-property (à revoir)

cffl:controlling_element_flow

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:27:07+00:00

<- Understanding flex axesContent wrapping -> flex-flow:row|row-reverse|column|column-reverse; default value: row. Les valeurs reverse font commencer le stack sur le côté opposé, inversant ainsi les éléments (il ne s'agit pas d'un simple iunversement, on aligne aussi sur le côté opposé).

cffl:cross-axis_alignment

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T15:15:11+00:00

<- Main axis alignmentAligning single items -> cross-axis align-items -> cross-axis * align-items * flex-start (aligné à droite/bas) * flex-end (aligné à droite/haut) * center (centré) * stretch (valeur par défaut : adapte l'élément à la hauteur/largeur) * baseline (aligné sur la ligne de base de la première ligne de chaque élément).

cffl:current_support

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:13:12+00:00

<- Flexbox overviewDefining flex elements -> changements de syntax * 2009 : Syntaxe portée depuis le XUL de Mozilla * 2011 : Syntaxe parfois référée comme la syntaxe “Tweener” (ie10) * 2012 : version actuelle, considérée comme stable (chrome22,opera12.1,blackberry browser 10)

cffl:defining_display_ratios

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T19:32:07+00:00

<- Controlling element flexibilityChallenge - Creating element flexibility -> Think of flex values as display ratios.

cffl:defining_element_display_order

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T16:47:13+00:00

<- Solution - Aligning flex itemsFlex flow and display order -> order * order: ; Ces nombres vont servir à ordonner les éléments. S'applique aux éléments flex, non au conteneur.

cffl:defining_flex_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:17:45+00:00

<- Current supportUnderstanding flex axes -> * définir un conteneur flexbox (display:flex;) * les éléments enfants deviennent automatiquement des éléments flexbox (flexbox items). display:-ms-flexbox; // vieille syntaxe pour vieux navigateurs MS display:flex;

cffl:flex_flow_and_display_order

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T17:00:30+00:00

<- Defining element display orderNesting flex containers -> flex-flow Faire attention en utilisant flex-flow, par exemple avec row-reverse qui va inverser l'ordre des éléments. Possibilités de combiner flox-flow et justify-content. Y faire attention.

cffl:flex_item_margins

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T15:41:30+00:00

<- Aligning single itemsAligning multiple lines -> * -> flex items margins do not collapse, que ce soit verticalement ou horizontalement, et les marges sont utilisés lors du calcul de la taille finale de l'élément * Les marges extérieurs affectent les alignements et la taille de l'élément (propriété flex + margins = marges utilisés pour calculer la taille de l'élément)

cffl:flexbox_overview

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:00:49+00:00

<- Using the exercise filesCurrent support -> historique de la mise en page basée sur CSS * Pas de CSS, que du normal flow * Arrivée de CSS, ajoute le support du modèle de boite et des floats * Ajout de modèles de positionnement comme absolute et fixed * CSS flexible layout box model

cffl:main_axis_alignment

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T15:08:35+00:00

<- Solution - Creating element flexibilityCross-axis alignment -> main-axis Aligner des éléments * Chaque flex-container à deux axes : main et cross * column : main-axis = vertical * row : main-axis = horizontal Pour aligner selon l'axe principal : * justify-content (à appliquer sur le conteneur flex)

cffl:nesting_flex_containers

Anonymous (anonymous@undisclosed.example.com) — 2016-01-06T17:17:12+00:00

<- Flex flow and display orderChallenge - Controlling display order -> Les éléments flex peuvent aussi être des conteneurs flex. Dans le futur : CSS3 grid layout module.

cffl:understanding_flex_axes

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T18:22:50+00:00

<- Defining flex elementsControlling element flow -> comprendres les "axes flex" (flex axis) rang (row) -> main axis eee ↓cross axis colonne (column) -> cross axis eee ↓ main axis contrôle propriété flex-flow

cffl:understanding_the_flex_property

Anonymous (anonymous@undisclosed.example.com) — 2016-01-05T19:15:15+00:00

<- Challenge overviewControlling element flexibility -> * w3.org/TR/CSS3-flexbox/#flex-property La propriété flex est un shorthand pour trois propriétés : * flew grow * flex shrink * flesh basis Ces propriétés sont utilisés pour définir la taille d'un élément flex en relation avec les autres éléments flex ainsi que comment s'étendre ou se réduire.

cffl:what_is_flexbox

Anonymous (anonymous@undisclosed.example.com) — 2016-01-12T00:56:37+00:00

<- How to use the exercise filesCaveats when using Flexbox today ->