Мазмұны:

Flexbox контейнері дегеніміз не?
Flexbox контейнері дегеніміз не?

Бейне: Flexbox контейнері дегеніміз не?

Бейне: Flexbox контейнері дегеніміз не?
Бейне: Flexbox CSS практический курс за 6 минут. Все свойства 2024, Қараша
Anonim

А икемді контейнер қол жетімді бос орынды толтыру үшін элементтерді кеңейтеді немесе толып кетуді болдырмау үшін оларды кішірейтеді. Ең бастысы, flexbox орналасу кәдімгі орналасуларға қарағанда бағытты-агностикалық болып табылады (тігінен негізделген блок және көлденең негіздегі кірістірілген).

Осыған байланысты Flexbox қалай пайдаланасыз?

Түйіндеме

  1. Дисплейді пайдаланыңыз: икемді; икемді контейнер жасау үшін.
  2. Элементтердің көлденең туралануын анықтау үшін justify-content пайдаланыңыз.
  3. Элементтердің тік туралануын анықтау үшін align-elements пайдаланыңыз.
  4. Жолдардың орнына бағандар қажет болса, икемді бағытты пайдаланыңыз.
  5. Элемент ретін аудару үшін жолға кері немесе бағанға кері мәндерді пайдаланыңыз.

Flex контейнерін қалай жасауға болады? Кез келгенін қолданар алдында flexbox сипатты анықтау үшін a икемді контейнер сіздің орналасуыңызда. Сіз икемді контейнер жасаңыз элементтің көрсету қасиетін мыналардың біріне орнату арқылы flexbox орналасу мәндері: иілу немесе кірістірілген- иілу . Әдепкі бойынша, иілу элементтер солдан оңға қарай негізгі осьте көлденеңінен орналасады.

Осылайша, Flexbox не үшін пайдаланылады?

Flexbox элементтерге контейнердегі кеңістікті туралауға және таратуға мүмкіндік беретін орналасу үлгісі болып табылады. Икемді ені мен биіктіктерін пайдалана отырып, элементтерді бос орынды толтыру немесе элементтер арасында кеңістікті бөлу үшін туралауға болады, бұл оны таңдау үшін тамаша құрал етеді. үшін пайдаланыңыз жауап беретін жобалау жүйелері.

Flex контейнеріндегі әдепкі бағдар қандай?

The әдепкі дисплейді қолданғаннан кейін реттеу: иілу негізгі ось бойынша солдан оңға қарай реттелетін элементтерге арналған. Төмендегі анимация қашан болатынын көрсетеді иілу - бағыт : бағанына қосылады контейнер элемент. Сіз де аласыз икемді орнатыңыз - бағыт жолды кері және бағанды кері айналдыру үшін.

Ұсынылған: