Re-inforcement

slides.com/abernier/ironhack-cssreinforcement

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

https://codepen.io/abernier/pen/bJdeZm?editors=1100
+strech

1. Auto-margins

Home

Seeeeeearch

Logout

https://codepen.io/abernier/pen/RzBNjV?editors=1100

margin-left:auto

2. vertical-centering

+horizontal-centering

Home

Seeeeeearch

Logout

height:500px;

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

croix : https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg?download=true

3. 🕺flexitude

Home

Seeeeeearch

Logout

Home

Seeeeeearch

Logout

display:flex;

flex:1;

https://codepen.io/abernier/pen/KYpXJZ?editors=1100

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

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%;

👁 voir : https://codepen.io/abernier/pen/NmaeRX

flex-basis:auto => fallbacks to

width:auto => fallbacks to

⚠️ 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`

see: https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b#23dd

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