Re-inforcement

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

1. Auto-margins

Home

Seeeeeearch

Logout

margin-left:auto

2. vertical-centering

+horizontal-centering

Home

Seeeeeearch

Logout

height:500px;

"stretch"

Home

Seeeeeearch

Logout

align-items: stretchcenter;

red: #ed462f

logo: https://assets.codepen.io/67030/ironhack-logo.svg – dark blue : #1e2333 – light blue : #4bc3fb

font: Josefin Slab (thin)

red: #ed462f – width: 70%

top

bottom

left

right

position:relative (ou absolute)

position:absolute

position:static

3. 🕺flexitude

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

display:flex;

flex:1;

available space

flex-direction: rowcolumn;

violet : #7a3fbd – tips : 💡 `flex-direction:column;`

NB : si davantage de contenu ([contenteditable]) => barre de scroll + décale le footer en dehors du viewport

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

display:flex;

width:33.33333%;

available space

largeur de la sidebar : 20em / bleu : #50c2da

20em

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

display:flex;

flex:1;

available space

Design elastique – vert foncé : #459f8b  vert clair : #a7e3dd

images : bath.svg couch.svg cupboard.svg

90%

Design elastic – vert : #5abd4c

images : light.svg share.svg target.svg 

Design elastic – vert : #5abd4c

images : light.svg share.svg target.svg 

Design elastic – vert : #5abd4c

images : light.svg share.svg

raisonner par ligne -- margin-right -- :not()

Advanced

flex:initial; 0 1 auto

flex:none;    0 0 auto

flex:auto;    1 1 auto

flex:2;       2 1 0px

flex-grow

flex-shrink

flex-basis

unflexible (do not shrink when not enough space)

strechy (strech if available space)

receives the specified proportion of the available space

default (shrink when not enough space)

flex shorthand

flex-basis:Xpx

X Réprésente la largeur idéale/hypothétique

AVANT que l'espace libre ou manquant ne soit redistribué

flex:1 1 500px;

1000px

content < width < flex-basis value (limited by min/max-width*)

flex-basis:auto ?

* `min-width` est par défaut à `auto`, soit la largeur de son contenu (seulement quand il s'agit d'un flex item, autrement ils sont par défault à 0px)

ce qui veut dire qu'un flex-item ne pourra pas etre plus étroit que son contenu que si l'on change par `min-width:0`

voir : https://gedd.ski/post/the-difference-between-width-and-flex-basis/

conteeeeeeeeeeent

width:50%;
flex-basis:auto; (default)

width:50%;
flex-basis:75%;

flex-basis:auto => fallbacks to

width:auto => fallbacks to

avec width

avec width
+ flex-basis

sans rien =

width:auto + flex-basis:auto

⚠️ min-width:auto; (posera problème qd plus assez de place)

flex-basis & min-width:auto

conteeeeeeeeeeent

flex-basis:10%;

10%

Nous l'avons vu, `flex-basis` est limité par min/max-width

comme par défaut `min-width:auto` => limité par le min-width de `conteeeeeeeeeeent`

If you have three flex items with flex values of 3, 3, and 4.

Then they will take up 30%, 30% and 40% of the available space, regardless of their content, if their flex-basis is 0. And only if it’s zero.

C'est ce que fait le shorthand :
flex:2;

scss
autoprefixer
media queries

Made with Slides.com