CSS свойство flex-basis
Свойство flex-basis задаёт начальный основной размер гибкого элемента. Если это свойство не указано, его начальное значение равно auto.
Свойство flex-basis является одним из свойств CSS3.
Если гибких элементов нет, свойство flex-basis не окажет никакого влияния.
Когда flex-basis установлено в конкретную длину или процент, оно имеет приоритет над width (или height, если flex-direction равно column) при определении начального основного размера элемента.
Примечание: Сокращённое свойство flex устанавливает flex-basis вместе с flex-grow и flex-shrink. Если указано flex, оно имеет приоритет над отдельным свойством flex-basis.
| Начальное значение | auto |
|---|---|
| Применяется к | Гибким элементам, включая псевдоэлементы в потоке. |
| Наследуется | Нет. |
| Анимация | Да. Элементы можно анимировать. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.flexBasis = "100px"; |
Синтаксис
Синтаксис свойства CSS flex-basis
flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;Базовый пример
Пример использования свойства CSS flex-basis
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 300px;
height: 80px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
.box div:nth-of-type(2) {
flex-basis: 140px;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div style="background-color: #eeeeee;">40px</div>
<div style="background-color: #1c87c9;">140px</div>
<div style="background-color: #8ebf42;">40px</div>
<div style="background-color: #cccccc;">40px</div>
<div style="background-color: #666666;">40px</div>
</div>
</body>
</html>Результат
Пример со всеми значениями
Пример свойства flex-basis со всеми значениями:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
height: 70px;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 60px;
padding: 15px;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 40%;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
flex-basis: auto;
background-color: yellow;
}
.box div:nth-of-type(4) {
flex-basis: initial;
background-color: orange;
}
.box div:nth-of-type(5) {
flex-basis: inherit;
background-color: pink;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div>
number 60px
</div>
<div>
percentage 40%
</div>
<div>
auto
</div>
<div>
initial
</div>
<div>
inherit
</div>
</div>
</body>
</html>Пример со значениями в пикселях
Пример свойства flex-basis, заданного в пикселях:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 460px;
height: 70px;
display: flex;
}
.box div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 70px;
padding: 15px;
}
.box div:first-child {
background-color: #40c3da;
}
.box div:nth-of-type(2) {
flex-basis: 100px;
background-color: lightgreen;
}
.box div:nth-of-type(3) {
background-color: #1c87c9;
}
.box div:nth-of-type(4) {
flex-basis: 150px;
background-color: orange;
}
.box div:nth-of-type(5) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div>
70px
</div>
<div>
100px
</div>
<div>
70px
</div>
<div>
150px
</div>
<div>
70px
</div>
</div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | percentage | Задаёт фиксированный размер с использованием единиц измерения, таких как px, em, rem, или процента (%). | Запустить » |
| auto | Значение по умолчанию. Размер элемента определяется его содержимым или свойствами width/height. | Запустить » |
| initial | Устанавливает свойство в его значение по умолчанию. | Запустить » |
| inherit | Наследует это свойство от родительского элемента. | |
| min-content | Определяет размер элемента на основе минимальной ширины/высоты содержимого. | Запустить » |
| max-content | Определяет размер элемента на основе максимальной ширины/высоты содержимого. | Запустить » |
| fit-content | Определяет размер элемента на основе функции fit-content. | Запустить » |
| content | Определяет размер элемента на основе его содержимого. | Запустить » |
Практика
Что делает свойство 'flex-basis' в CSS?