VSC + HTML + CSS

Flexbox Grid

Flexbox Grid od Kristofera Josepha.

Tento framework nemění vzhled naší stránky a neupravuje jiné elementy, stará se jen a pouze o grid systém.

Flexbox Grid

Flexbox Gride je nutné stáhnout a zavést do vlastního systému nebo jej odkázat v hlavičce

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" />

Flexbox Grid

<div class="row">
      <div class="col-xs-3">tři (čtvrtina z 12</div>
      <div class="col-xs-3">tři (čtvrtina z 12)</div>
      <div class="col-xs-6">šest (polovina z 12)</div>
</div>

Jako první definujeme řádek, kterým obalíme všechny sloupce. Ten definujeme jako <div> se třídou .row. Sloupce se definují také jako <div>, kterému přidáme třídu .col-x-y.

x může nabývat hodnot od nejmenšího xs(telefony), sm, md až lg.

Tímto udáváme, od jaké velikosti zařízení začíná styl platit.

• xs-y - element bude široký y sloupců na velmi malých zařízeních a větších (tedy na všech)
• sm-y - element bude široký y sloupců na malých zařízeních a větších
• md-y - element bude široký y sloupců na středně velkých zařízeních a větších
• lg-y - element bude široký y sloupců na velkých zařízeních

y nabývá hodnot 1 až 12 a udává, kolik sloupců bude element zabírat.

Součet všech elementů v jednom řádků může být max 12 sloupců.

Shora uvedený případ má tři sloupce od xs tedy od nejmenšího

Níže uvedený příklad pak uvádí že od třídy sx ná sloupec celou šířku 12 a od třídy md má pak šířku 3+3+6.

První je tedy pro třídu xs sm a druhý je pro md lg

<div class="row">
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-6">Polovina</div>
</div>

Takže dojde automaticky k rozpoznání a responzivnímu řazení pod sebe u zařízení velmi malých a zařízení malých a větších

Důležité

Při používání Flexbox Grid bychom neměli používat margin.

Sloupce mají přesně definovanou šířku a použitím margin může dojít k přetečení.

Flexbox Grid

Flexbox Grid od Kristofera Josepha.

Tento framework nemění vzhled naší stránky a neupravuje jiné elementy, stará se jen a pouze o grid systém.

Flexbox Grid

Flexbox Gride je nutné stáhnout a zavést do vlastního systému nebo jej odkázat v hlavičce

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" />

Flexbox Grid

<div class="row">
      <div class="col-xs-3">tři (čtvrtina z 12</div>
      <div class="col-xs-3">tři (čtvrtina z 12)</div>
      <div class="col-xs-6">šest (polovina z 12)</div>
</div>

Jako první definujeme řádek, kterým obalíme všechny sloupce. Ten definujeme jako <div> se třídou .row. Sloupce se definují také jako <div>, kterému přidáme třídu .col-x-y.

x může nabývat hodnot od nejmenšího xs(telefony), sm, md až lg.

Tímto udáváme, od jaké velikosti zařízení začíná styl platit.

• xs-y - element bude široký y sloupců na velmi malých zařízeních a větších (tedy na všech)
• sm-y - element bude široký y sloupců na malých zařízeních a větších
• md-y - element bude široký y sloupců na středně velkých zařízeních a větších
• lg-y - element bude široký y sloupců na velkých zařízeních

y nabývá hodnot 1 až 12 a udává, kolik sloupců bude element zabírat.

Součet všech elementů v jednom řádků může být max 12 sloupců.

Shora uvedený případ má tři sloupce od xs tedy od nejmenšího

Níže uvedený příklad pak uvádí že od třídy sx ná sloupec celou šířku 12 a od třídy md má pak šířku 3+3+6.

První je tedy pro třídu xs sm a druhý je pro md lg

<div class="row">
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-6">Polovina</div>
</div>

Takže dojde automaticky k rozpoznání a responzivnímu řazení pod sebe u zařízení velmi malých a zařízení malých a větších

Důležité

Při používání Flexbox Grid bychom neměli používat margin.

Sloupce mají přesně definovanou šířku a použitím margin může dojít k přetečení.