Съдържание:

Какво е контейнер Flexbox?
Какво е контейнер Flexbox?

Видео: Какво е контейнер Flexbox?

Видео: Какво е контейнер Flexbox?
Видео: CSS Flexbox #3. Начинаем работу с Flexbox (cоздаем flex контейнер + flex элементы) 2024, Ноември
Anonim

А гъвкав контейнер разширява елементите, за да запълни наличното свободно пространство, или ги свива, за да предотврати преливане. Най-важното е, flexbox оформлението е независимо от посоката, за разлика от обикновените оформления (блок, който е вертикално базиран и вграден, който е хоризонтално базиран).

Във връзка с това, как използвате Flexbox?

Резюме

  1. Използвайте дисплей: flex; за създаване на гъвкав контейнер.
  2. Използвайте justify-content, за да определите хоризонталното подравняване на елементите.
  3. Използвайте align-items, за да определите вертикалното подравняване на елементите.
  4. Използвайте flex-direction, ако имате нужда от колони вместо редове.
  5. Използвайте стойностите за обръщане на редове или колони, за да обърнете реда на елементите.

как се прави Flex контейнер? Преди да можете да използвате някое flexbox свойство, трябва да дефинирате a гъвкав контейнер във вашето оформление. Вие създайте гъвкав контейнер като зададете свойството за показване на елемент на едно от flexbox стойности на оформлението: огъване или inline- огъване . По подразбиране, огъване елементите са разположени хоризонтално по главната ос отляво надясно.

По този начин за какво се използва Flexbox?

Flexbox е модел на оформление, който позволява на елементите да подравняват и разпределят пространството в контейнер. Използвайки гъвкави ширини и височини, елементите могат да бъдат подравнени, за да запълнят пространство или да разпределят пространството между елементите, което го прави чудесен инструмент за използвай за адаптивни дизайн системи.

Каква е ориентацията по подразбиране в Flex контейнер?

В по подразбиране подреждане след прилагане на дисплея: огъване е за елементите да бъдат подредени по главната ос отляво надясно. Анимацията по-долу показва какво се случва, когато огъване - посока : колоната се добавя към контейнер елемент. Можете също задайте гъвкавост - посока към row-reverse и column-reverse.

Препоръчано: