CSS Layout

Minimální kuchařka

Vytvořil Lukáš Mladý / mladylukas@gmail.com / @lukasmlady / pond5.com

Co nás čeká?

Float

Pozicování

Table layout

Inline block

Flexbox

Grid layout

Float layout

CSS vlastnosti

Aplikace obtékání:


.floater { float: left; }
.floater { float: right; }
.floater { float: none; }
          

Zrušení obtékání:


.after-floater { clear: left; }
.after-floater { clear: right; }
.after-floater { clear: both; }
.after-floater { clear: none; }
          

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolor error, inventore mollitia obcaecati perspiciatis placeat quas! Accusamus cumque ipsum, iusto necessitatibus non perspiciatis quisquam saepe sed sunt voluptatum! Lorem ipsum dolor sit amet, consectetur adipisicing elit.


img { float: left; margin-right: 1em; }
          

Clearfix (micro clearfix)


.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
          
Zdroj: Nicolas Gallagher

New block formatting context

Souvisí s chováním elementů poblíž plovoucích prvků

„Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ’overflow’ other than ’visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.“
Zdroj: w3.org

New block formatting context

  1. Plovoucí prvky.
  2. Absolutně pozicované elementy (kde position je absolute nebo fixed).
  3. Element s vlastností display a hodnotou table-cell nebo table-caption.
  4. Elementy s vlastností overflow jinou než visible.
  5. Nově i elementy s vlastností display a hodnotou flex.

New block formatting context

„In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).“
Zdroj: w3.org
.left
.right

div { height: 4em; }
.left { float: left; width: 40%; }
.right { float: right; width: 40%; }
.footer { height: 6em; clear: both; }
          

Fakta

Jednoduché na použití

Lze vytvořit sloupcový layout

Nutnost zrušení obtékání pro následníky

Vertikální zarovnání - ne-e

Nelze dosáhnout totožné výšky všech sloupců ve sloupcovém layoutu

Pozicování

CSS vlastnosti


.positioned { position: static; }
.positioned { position: relative; }
.positioned { position: absolute; }
.positioned { position: fixed; }
.positioned { position: sticky; }
          

.positioned { top: 0; right: 0; bottom: 0; left: 0; }
          

.positioned { z-index: 10; }
          

z-index

positioned
Non-positioned

.positioned {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  height: 6em;
  width: 6em;
}
.non-positioned { position: static; }
          

Fakta

Modální okna

Fixed (sticky) header

Dropdown

Widgety typu slider či range

Obecně špatný pro běžný layout

Table layout

CSS vlastnosti


.table { display: table; }
.table-child { display: table-row; }
.table-child { display: table-cell; }
          

.table { table-layout: auto; }
.table { table-layout: fixed; }
          

Cell #1
Cell #2
Cell #3
Cell #4

.table {
  display: table;
  table-layout: auto;
}
.table-cell {
  display: table-cell;
}
          

Fakta

Horizontální i vertikální zarovnání

Přirozeně roztažitelné elementy

Sloupcový layout

Nutné obalující elementy

Obtížné udělat mezery mezi prvky

Inline block

CSS vlastnosti


.inline-block { display: inline-block; }
          

Item #1
Item #2
Item #3
Item #4

.parent {}
.item {
  display: inline-block;
}
          

Fakta

Horizontální i vertikální zarovnání relativně snadné

Vhodné pro grid system

Potřeba odstranit mezery mezi elementy

Flexbox

CSS vlastnosti


.flexbox { display: flex; }
.flexbox-inline { display: inline-flex; }
          

.flexbox { flex-direction: row; }
.flexbox { flex-wrap: wrap; }
.flexbox { flex-flow: row wrap; }
          

.flexbox { justify-content: center; }
.flexbox { align-content: center; }
.flexbox { align-items: center; }
.flexbox-item { align-self: center; }
.flexbox-item { margin: auto; }
          

.flexbox-item { flex-grow: 1; }
.flexbox-item { flex-shrink: 1; }
.flexbox-item { flex-basis: 50px; }
.flexbox-item { flex: 1 0 auto; }
          

.flexbox-item { order: 4; }
          

.flex { align-items: stretch }
          

Item #1
Item #2
Item #3
Item #4

.parent { display: flex; }
.item {
  flex: none;
}
          

Fakta

Flexibilní rozměry prvků

Horizontální i vertikální zarovnání snadné

Ideální pro layout

Složitá syntaxe

Stále slabší podpora prohlížeči

Podpora prohlížeči

Chrome Safari Firefox Opera IE Android iOS
2009 20- 3.1-6 2-21 - - 2.1-4.3 3.2-6.1
2011 - - - - 10 - -
2012 21+ 6.1+ 22+ 12.1+ 11 4.4+ 7+

Flexbox dnes

Neexistuje JS polyfill

Table layout jako fallback

Modernizr a ".flexbox" či ".flexbox-legacy" CSS třídy

Mobilní prohlížeče podporují - responsive design

Neřešit IE9 a starší - pokud se to vyloženě nerozbije

Ideálně používat abstraktní komponenty (grid)

Grid layout

CSS vlastnosti


.grid { display: grid; }
.grid-inline { display: inline-grid; }
          

.grid { grid-template-rows: 100px 1fr; }
.grid { grid-template-columns: 100px 1fr 100px; }
.grid {
  grid-template-areas: "a b c"
                       "d d d";
}
.grid {
  grid-template: 100px 1fr 100px /
                 "a b c" 100px
                 "d d d" 1fr;
}
          

.grid-item { grid-area: a; }
          

a mnoho dalších...


A
B
C

.grid {
  display: grid;
  height: 6em;
  grid-template: 100px 1fr /
                 "a b" 100px
                 "c c" 1fr
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
          

Fakta

Zarovnání do flexibilní mřížky

Flexibilní rozměry prvků

Horizontální i vertikální zarovnání snadné

Ideální pro celostránkový layout

Ideální pro layout formulářů

Složitá syntaxe

Žádný prohlížeč nepodporuje

Pár praktických příkladů

Celostránkový layout

Float + position


Navigace
Postranní panel
Hlavní obsah
Patička

.wrapper { position: relative; z-index: 1; background-color: #073642; }
.wrapper:before {
  content: "";
  position: absolute; z-index: -1; top: 0; left: 0; bottom: 0;
  width: 200px;
  background-color: #859900;
}
.wrapper:after { content: " "; display: table; clear: both; }
.main { display: table-cell; }
.side { float: left; width: 200px; }
          

Table layout


Navigace
Postranní panel
Hlavní obsah
Patička

.wrapper { display: table; width: 100%; }
.main { display: table-cell; background-color: #073642; }
.side { display: table-cell; width: 200px; background-color: #859900; }
          

Flexbox


Navigace
Hlavní obsah
Postranní panel
Patička

.wrapper { display: flex; }
.main { flex: 1; background-color: #073642; }
.side { width: 200px; order: -1; background-color: #859900; }
          

Grid layout


Navigace
Hlavní obsah
Postranní panel
Patička

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto;
  grid-template-areas: "side main";
}
.main { grid-area: main; background-color: #073642; }
.side { grid-area: side; background-color: #859900; }
          

Vystředění prvků

Position


Vycentrovaný prvek


div { position: relative; height: 6em; }
p {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 50%;
  height: 60px; line-height: 60px;
  text-align: center;
  background-color: #268bd2;
}
          

Table layout


Vycentrovaný prvek


.outer { display: table; margin: 0 auto; height: 6em; }
.inner { display: table-cell; vertical-align: middle; }
p {
  background-color: #268bd2;
}
          

Flexbox


Vycentrovaný prvek


/* První možnost */
.first {
  display: flex;
  height: 4em;
  justify-content: center;
  align-items: center;
}
.first p { background-color: #268bd2; }
/* Druhá možnost */
.second { display: flex; height: 4em; }
.second p { margin: auto; background-color: #268bd2; }
          

Media object

Float

Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde. At deleniti incidunt quos repellat veritatis. Aliquid est perspiciatis sapiente. Aliquid est perspiciatis sapiente.

.media:after { content: " "; display: table; clear: both; }
.media .image { float: left; margin-right: 10px; }
.media .image-right { float: right; margin-left: 10px; }
.media .content { overflow: hidden; background-color: #268bd2; }
          

Table layout

 
Lorem ipsum dolor sit amet, consectetur.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde. At deleniti incidunt quos repellat veritatis. Aliquid est perspiciatis sapiente. Aliquid est perspiciatis sapiente.
 

.media { display: table; }
.media .image { display: table-cell; padding-right: 10px; }
.media .image-right { display: table-cell; padding-left: 10px; }
.media .content { background-color: #268bd2; }
          

Flexbox

 
Lorem ipsum dolor sit amet, consectetur.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde.

.media { display: flex; }
.media .image { margin-right: 10px; }
.media .image-right { margin-left: 10px; order: 1; }
.media .content { flex: 1; background-color: #268bd2; }
          

Grid layout

 
Lorem ipsum dolor sit amet, consectetur.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium asperiores autem deleniti distinctio, dolores fugiat ipsa odit sapiente unde.

.media {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "image-left content image-right";
}
.media .image { margin-right: 10px; grid-area: image-left; }
.media .image-right { margin-left: 10px; grid-area: image-right; }
.media .content { grid-area: content; background-color: #268bd2; }
          

Textové pole s tlačítkem

Float



.input-box:after { content: " "; display: table; clear: both; }
.input-box-left { overflow: hidden; }
.input-box-left input { box-sizing: border-box; width: 100%; }
.input-box-right { float: right; }
          

Table layout



.input-box { display: table; width: 100%; }
.input-box input {
  box-sizing: border-box;
  display: table-cell;
  width: 100%;
}
.input-box-btn { display: table-cell; width: 1%; white-space: nowrap; }
          

Flexbox



.input-box { display: flex; }
.input-box input { flex: 1; }
.input-box button { order: 1; }
          

Grid layout



.input-box {
  display: grid;
  grid-template: auto 1fr auto / "btn-left input btn-right" 1fr;
}
.input-box input { grid-area: input; width: 100%; }
.input-box button { grid-area: btn-right; }
          

Odkazy

Float

Position

Flexbox

Všechny layouty

Konec...nebo začátek?

Vytvořil Lukáš Mladý / mladylukas@gmail.com / @lukasmlady / pond5.com

Pond5 najímá frontend vývojáře! Vizte popis pozice.