Mundarija:

Flexbox konteyneri nima?
Flexbox konteyneri nima?

Video: Flexbox konteyneri nima?

Video: Flexbox konteyneri nima?
Video: CSS | 55. Flexbox: asoslari va terminlari 2024, May
Anonim

A moslashuvchan konteyner mavjud bo'sh joyni to'ldirish uchun elementlarni kengaytiradi yoki to'lib ketishining oldini olish uchun ularni qisqartiradi. Eng muhimi, flexbox layout oddiy maketlardan farqli o'laroq yo'nalish-agnostikdir (vertikal asosli blok va gorizontal asosli chiziqli).

Bu borada Flexbox-dan qanday foydalanasiz?

Xulosa

  1. Displeydan foydalaning: flex; moslashuvchan konteyner yaratish uchun.
  2. Elementlarning gorizontal tekislanishini aniqlash uchun justify-content dan foydalaning.
  3. Elementlarning vertikal tekislanishini aniqlash uchun align-elementlardan foydalaning.
  4. Agar sizga satrlar o'rniga ustunlar kerak bo'lsa, moslashuvchan yo'nalishdan foydalaning.
  5. Element tartibini almashtirish uchun satr-teskari yoki ustun-teskari qiymatlardan foydalaning.

Flex konteynerini qanday qilasiz? Har qanday foydalanishdan oldin flexbox mulk, siz a belgilashingiz kerak moslashuvchan konteyner sizning tartibingizda. Siz moslashuvchan konteyner yarating elementning ko'rsatish xususiyatini biriga o'rnatish orqali flexbox tartib qiymatlari: moslashuvchan yoki inline - moslashuvchan . Avvalboshdan, moslashuvchan elementlar asosiy o'qda chapdan o'ngga gorizontal ravishda joylashtirilgan.

Shu tarzda, Flexbox nima uchun ishlatiladi?

Flexbox elementlarni konteyner ichidagi bo'sh joyni tekislash va taqsimlash imkonini beruvchi tartib modelidir. Moslashuvchan kenglik va balandliklardan foydalanib, elementlar bo'sh joyni to'ldirish yoki elementlar orasidagi bo'shliqni taqsimlash uchun hizalanishi mumkin, bu esa uni juda yaxshi vosita qiladi. uchun foydalaning sezgir dizayn tizimlari.

Flex konteyneridagi standart yo'nalish nima?

The standart displeyni qo'llashdan keyin tartibga solish: moslashuvchan asosiy o'q bo'ylab chapdan o'ngga joylashtiriladigan narsalar uchun. Quyidagi animatsiya qachon sodir bo'lishini ko'rsatadi moslashuvchan - yo'nalishi : ustuniga qo'shiladi idish element. Siz ham mumkin moslashuvchanlikni o'rnating - yo'nalishi satr-teskari va ustun-teskari.

Tavsiya: