Основа Flex

flex-basisВластивість визначає розмір самих flex-itemуздовж головної осі гнучкого контейнера. Основна вісь є горизонтальною, якщо flex-directionвстановлено значення, rowі вона буде вертикальною, якщо для flex-directionвластивості встановлено значення column.

Синтаксис

flex-basis: auto | content |  | ;

гнучка основа: авто

flex-basis: autoшукає основний розмір елемента та визначає розмір. Наприклад, на горизонтальному гнучкому контейнері autoбуде шукати widthі heightякщо вісь контейнера вертикальна.

Якщо розмір не вказано, autoповернеться до content.

flex-osnova: зміст

flex-basis: contentвирішує розмір в залежності від вмісту елемента, якщо widthабо heightвстановлюється через нормально box-sizing.

В обох випадках, коли flex-basisє або, autoабо content, якщо вказано основний розмір, цей розмір матиме пріоритет.

гнучка основа:

Це настільки ж конкретно widthабо height, але лише більш гнучко. flex-basis: 20em;встановить початковий розмір елемента в 20em. Остаточний розмір базуватиметься на вільному просторі, flex-growкратному та flex-shrinkкратному.

Специфікація передбачає використання flexскороченого властивості. Це допомагає писати flex-basisразом з flex-growі flex-shrinkвластивостями.

Приклади

Ось ряди окремих гнучких контейнерів та окремих гнучких елементів, що показують, як flex-basisвпливає на box-sizing.

Коли flex-directionє column, те саме flex-basisбуде контролювати heightвластивість. Ви можете побачити це на прикладі нижче:

Більше інформації:

Ви можете фінансувати додаткові посилання про властивість flex basis на наступних сторінках:

• Специфікація CSS рівень 1
• Сторінка мережі розробників Mozilla на гнучкій основі

Більше інформації про Flexbox:

• Поради та підказки щодо CSS Flexbox
• Flexbox - найкраща шпаргалка