Layout : les essentiels

Eléments essentiels de mise en page

référence source

Modèle de boîte

content → padding → border → margin

box-sizing: border box

Au fur et à mesure que nous modifions les padding et border, cela ne modifie pas la taille de notre élément sur la page.

margin: 0 auto

Centre le contenu

Border-radius

Coins arrondis

  • TRBL
  • TB RL
  • T R B L

Display

  • inline
  • block
  • inline-block
  • none
  • flex

Flexbox

Propriétés conteneur

  • display
    • flex
    • inline-flex
  • flex-direction
    • row (par défaut)
    • row-reverse
    • column
    • column-reverse
  • flex-wrap
    • no-wrap (par défaut)
    • wrap
    • wrap-reverse
  • justify-content (axe principal)
    • flex-start (par défaut)
    • flex-end
    • center
    • space-between
    • space-around
  • align-items (axe secondaire)
    • flex-start
    • flex-end
    • center
    • stretch (par défaut)
    • baseline
  • align-content (axe secondaire)
    • flex-start
    • flex-end
    • center
    • stretch (par défaut)
    • space-between
    • space-around

Propriétés des éléments

  • align-self
    • auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • order
    • valeur numérique
  • flex-grow
    • valeur numérique
    • 0 (par défaut)
  • flex-shrink
    • valeur numérique
    • 1 (par défaut)
  • flex-basis
    • une valeur width
    • auto (par défaut)

Media queries

<link rel="stylesheet" media="(min-width: 900px)" href="mq_900-plus.css">

<link rel="stylesheet" media="(max-width: 900px)" href="mq_900-less.css">

<link rel="stylesheet" media="print" href="mq_print.css">

<link rel="stylesheet" media="screen and (min-width: 900px)" href="mq_screen_min-width.css">

<link rel="stylesheet" media="(min-width: 600px) and (max-width: 899px)" href="mq_600-899.css">

Position

Différentes valeurs

  • fixed
  • relative
  • absolute

Utiliser ces propriétés pour ajuster la position

  • top
  • bottom
  • right
  • left

Float

  • left, right
  • overflow: auto
  • clear
  • left, right, both

Meta-viewport

<meta name="viewport" content="width=device-width, initial-scale=1">
“Layout : les essentiels” a été mise à jour le :
Améliorer cette page