IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

flex-basis - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti flex-basis nastavujeme základní velikost pružného elementu. Jedná se o vlastnost k pozicování ve flexboxu.

Hodnoty

  • auto (výchozí) - Základní velikost pružného elementu je stejná jako ostatních. Pokud není definována, zabírá velikost svého obsahu.
  • číslo jednotka - Číslo může být libovolné a jednotka taky (tedy taková, která existuje v CSS 3 - cm, mm, px, em, ...).
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na auto).

Ukázka

Vytvořme si 3 sloupečky s hodnotou 60px u vlastnosti flex-basis. Každý z nich bude mít svoje jedinečné ID, které bude nastavovat jejich barvu. U modrého sloupečku však nastavíme vlastnost flex-basis na hodnotu 120px, čímž se modrý sloupeček zvětší a bude zabírat dvakrát více místa rodičovského elementu, který má černý, plný a 1px široký rámeček kvůli lepšímu zobrazení výsledku, než ostatní sloupečky. Rodičovskému elementu však musíme ještě nastavit vlastnost display na hodnotu flex.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                #hlavni
                {
                        width: 400px;
                        height: 400px;
                        border: 1px black solid;
                        display: flex;
                        display: -webkit-flex;  /* Safari */
                }
                div
                {
                        flex: none;
                        -webkit-flex: none;         /* Chrome, Safari */
                        -ms-flex: none;             /* IE 10 */
                        -moz-flex: none;            /* Mozilla Firefox */
                        flex-basis: 60px;
                        -webkit-flex-basis: 60px;   /* Chrome, Safari */
                        -ms-flex-basis: 60px;       /* IE 10 */
                        -moz-flex-basis: 60px;      /* Mozilla Firefox */
                }
                #modry
                {
                        background-color: #3B94E0;
                        flex-basis: 120px;
                        -webkit-flex-basis: 120px;  /* Chrome, Safari */
                        -ms-flex-basis: 120px;      /* IE 10 */
                        -moz-flex-basis: 120px;     /* Mozilla Firefox */
                }
                #cerveny
                {
                        background-color: red;
                }
                #zeleny
                {
                        background-color: green;
                }
                </style>
                <title>flex-basis</title>
        </head>
        <body>
                <div id="hlavni">
                        <div id="cerveny">Červený</div>
                        <div id="modry">Modrý</div>
                        <div id="zeleny">Zelený</div>
                </div>
        </body>
</html>

Výsledek:

Vlastnost flex-basis v CSS 3 - Ostatní CSS vlastnosti

Všimněte si, že pokud vlastnost flex zresetujeme a nastavíme pouze flex-basis, sloupečky nemusí být roztažené po celé velikosti rodičovského elementu.

Více o flexboxu v článku Flexbox - tvorba moderních layoutů. K lepšímu nastavování velikosti pružného elementu můžeme použít vlastnost flex.


 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity