CSS Flexbox – WEB programmēšana

Flexbox ir izkārtojuma modulis. Agrāk izkārtojumu veidoja ar “float”. Elementam norādīja, lai tas pakārtojas pa kreisi (float: left;) vai pa labi (float: right;). Izmantojot šo tehniku, var sastapties ar dažādām grūtībām.

Tulkojot uz latviešu valodu: Elastīgās kastes izkārtojuma modulis, tātad atslēgas vārts ir elastība. Jau pēc noklusējuma elestība izpaužas tā, ka grupas elementi ir vienāda augstuma, kaut arī saturs nav vienlīdzīgs visiem. Lai sāktu izmantot Flexbox modeli, vispirms ir jādefinē elastīgais konteiners.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: yellow;
}

.flex-container > div {
  background-color: green;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
  </div>
  <div>Esmu "div" ārpus "flex-container"</div>
</body>
</html>

Bez jebkāda stila, tikai izmantojot <h2> un <p> tagus, var iegūt šādu rezultātu:

Uzdevums pievienot CSS, izmantojot Flexbox, lai iegūtu šādu rezultātu: