WebDev.wiki > CSS > CSS vlastnosti a hodnoty > flex-basis

flex-basis

Definice a použití

Vlastnost flex-basis určuje šířku flexibilního elementu. Vlastnost má efekt pouze na dceřinné prvky elementu s display vlastností nastavenou na flex nebo inline-flex.

Hodnoty vstupů	Popis
auto	Nespecifikovaná šířka/výška, může být určena vlastností width/height (defaultní hodnota)
číslo	Číselná hodnota v jednotkách nebo procentech určující šířku flexibilního elementu
content	Nastaví šířku flexibilního elementu podle jeho obsahu
initial	Nastaví hodnotu na defaultní
inherit	Dědí hodnotu z mateřského elementu

Ukázka:

CSS

/* CSS pro lepší čitelnost ukázky */
div {
	background: #60c545;
	padding: 10px;
	height: 50px;
}
div div {
	width: 10%;
	border: 1px solid #FF0000;
	text-align: center;
	background: #FFF;
	border-sizing: border-box;
	height: auto;
}

/* Defaultně nastavíme, aby se flexibilní elementy řadili na začátek */
.flexbox {
	display: flex;
	justify-content: space-between;
}

/* Flexibilní element bude 100px široký */
.flexbox #flex-100 {
	flex-basis: 100px;
}

/* Flexibilní element bude 60px široký (flex-basis přepisuje vlastnost width) */
.flexbox #flex-60 {
	flex-basis: 60px;
	width: 200px;
}

/* Flexibilní element bude 50% široký */
.flexbox #flex-50 {
	flex-basis: 50%;
}

/* Flexibilní element bude 5em široký */
.flexbox #flex-5 {
	flex-basis: 5em;
}

Použité vlastnosti: background, padding, height, width, border, text-align, display, justify-content, flex-basis

HTML

Flexibilní elementy a jejich šířky nastavené vlastností flex-basis:
<div class='flexbox'>
	<div id='flex-100'>100px</div>
	<div id='flex-60'>60px</div>
	<div id='flex-50'>50%</div>
	<div id='flex-5'>5em</div>
</div>

Použité tagy: <div>

Výsledek:

Flexibilní elementy a jejich šířky nastavené vlastností flex-basis:

100px

60px

50%

5em

Tip1 Vlastnost flex-basis je podobná klasické CSS vlastnosti width/height a přepisuje její hodnotu (pouze pro flexibilní elementy).

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 9

Operaversion: 17