Всичко за свойствата на flexbox

Концепцията, която стои зад свойствата на Flexbox, е да предостави възможност на контейнера автоматично да променя ширината, височината и реда на своите елементи, за да запълни най-добре наличното пространство. Това може да бъде наистина полезно за настаняване на елементи в различни размери на екрана и устройства. Елементите се разширяват, за да запълнят свободното пространство, или се свиват, за да се избегне преливане.

CSS Flexbox решетка за начинаещи

CSS е едно от първите и най-лесни неща за научаване в уеб разработката и дизайна, но не сгрешавайте неговата простота поради липса на функции. Той има редица невероятни функции и възможности, готови да бъдат използвани, като една от тях е неговият сравнително нов модул за оформление: Flexbox свойства.

Свойствата на Flexbox са една от по-новите оформления, достъпни за CSS3, и има какво да научите за него. Тук се захващаме с оформлението и как да го използваме. Преди да започнем обаче, ето малко предимство за свойствата на Flexbox:

Какво представляват режимите на оформление?

Най-просто казано, CSS Flexbox решетката е режим на оформление. CSS има няколко съществуващи режима на оформление. Режимът на оформление на блока (като дисплей: блок) съществува от доста време. Блоковите оформления са добър избор за стилизиране на пълни документи. Всъщност уеб браузърът третира няколко елемента като div и параграфи като ниво на блок по подразбиране.

Друг често срещан режим на оформление е вграден. Силният таг, входният маркер и котвата са примери за елементи с ниво на вграждане. Инструментите за разработчици на Google Chrome дори ви позволяват да видите „изчисления стил“ на елемента, за да определите CSS свойствата и стойностите, които са били приложени към елементите, които не са изрично зададени от програмиста.

Сравнително по-новото оформление на свойствата на Flexbox (Гъвкава кутия) е проектирано като по-ефективен метод за полагане, подравняване и разпределение на пространството между контейнерните елементи, дори ако размерът на тези елементи е динамичен или неизвестен. Оттук и терминът „гъвкав“.

Концепцията за свойства на Flexbox

Най-важното за свойствата на Flexbox е, че е насочен-агностичен. Докато оформлението на блока е базирано на вертикала и вграденото оформление е на хоризонтална основа, Flexbox не е нито едно от двете. Блокът и вграждането работят добре в правилните ситуации, но им липсва гъвкавост за поддържане на сложни или големи приложения, особено когато става въпрос за промяна на ориентация, разтягане, свиване, промяна на размера и по друг начин промяна на размерите на елементите.

Къде се използват свойства на Flexbox?

Както всяко друго CSS оформление, Flexbox се използва най-добре в определени ситуации. По-специално, той е подходящ за мащабни оформления и компоненти на приложение. За по-голям мащаб оформлението на Grid ще бъде по-мъдър избор.

Защо се предпочита Flexbox?

Много разработчици и дизайнери отдават предпочитание на свойствата на Flexbox винаги, когато могат (понякога твърде често!). Това е така, защото свойствата на Flexbox са по-лесни за използване; позиционирането на елементите е много по-просто, така че можете да получите по-сложни оформления с по-малко кодиране. С други думи, това прави процеса на развитие по-опростен.

Ръководство за Flexbox Properties

След като знаете малко за свойствата на Flexbox и как и защо работи, ето подробно ръководство за оформлението. Моделът на оформлението е съставен от родителски контейнер, наричан още „гъвкав контейнер“. Непосредствените деца от този контейнер се наричат ​​„гъвкави предмети“.

Оформлението премина през няколко итерации и промени в синтаксиса през годините от създаването на първата му чертеж през 2009 г. Най-новата спецификация на Flexbox се поддържа в следните уеб браузъри:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Терминологията, използвана в Flexbox свойства

Ето един основен терминология, използвана в оформлението на свойствата на Flexbox:

  • Дисплей: Тази команда се използва за определяне на гъвкавия контейнер. Той може да бъде вграден или блокиран, в зависимост от това Той също така определя гъвкаво съдържание за всички елементи в контейнера. Пример:

.контейнер (

дисплей: гъвкав; / * или inline-flex * /

)

  • Подреждане: Flex елементите се подреждат според първоначалния ред, но свойството 'order' може да контролира реда, в който елементите се появяват в контейнера. Пример:

.вещ (

поръчка: ;

)

  • Посока на гъвкавост : Този ред задава основната ос, определяща посоката, в която са поставени гъвкавите елементи в контейнера. Гъвкавите елементи могат да бъдат главно разположени във вертикална или хоризонтална посока. Пример:

.контейнер (

flex-посока: ред | ред-обратен | колона | колона-обрат;

)

  • Разгъване с гъвкавост : Тази поръчка определя способността на гъвкавия елемент автоматично да се увеличава, ако има място. Той може да приеме безразделна стойност, която да служи като пропорция. Тази стойност диктува колко пространство трябва да заема артикула в контейнера за гъвкавост. Например, ако всички елементи имат гъвкаво увеличение като 1, оставащото пространство в контейнера ще бъде разпределено по равно на всички деца. Ако стойността е 2, оставащото пространство ще заеме два пъти повече пространство от останалото. Пример:

.вещ (

гъвкав растеж; / * по подразбиране 0 * /

)

  • Flex-свиване: Това прави точно обратното, докато гъвкавостта расте, тъй като свива гъвкавите елементи, когато е необходимо. Пример:

.вещ (

гъвкаво свиване:; / * по подразбиране 1 * /

)

  • Flex-основа: Тази поръчка определя размера на елементи по подразбиране, преди да бъде разпределена останалата част от пространството. Тя може да бъде дължина, като 5rem или 20%, или ключова дума. Ключовата дума „автоматично“ показва, че ширината и височината на продукта се измерват, а ключовата дума „съдържание“ показва, че елементът е оразмерен въз основа на съдържанието му. Пример:

.вещ (

гъвкава основа: | Автоматичен; / * автоматично по подразбиране * /

)

  • Flex: Това е комбинирана стенограма за всички горепосочени три свойства: гъвкав растеж, гъвкава основа и гъвкавост-свиване. По подразбиране е "0 1 автоматично".

.вещ (

flex: няма | (||)

)

  • Оправдание-съдържание: Тази поръчка определя подравняването на основната ос и помага да се разпредели допълнителното свободно пространство, ако има останало ляво, когато елементите са негъващи или са достигнали максималния си размер. Това също помага да се контролира подравняването на елемента, когато има преливане.

.контейнер (

justify-content: flex-start | гъвкав край | център | интервал между | пространство около;

)

  • Подравняване на елементи: Използва се за определяне поведението по подразбиране на оформлението на гъвкави елементи на напречната ос на текущата линия. По същество това е версия на „оправдание-съдържание“ на напречната ос, която е перпендикулярна на основната ос. Пример:

.контейнер (

подравняване-елементи: flex-start | гъвкав край | център | базова линия | опъвам, разтягам;

)

  • Съвместимо съдържание: Този ред подравнява линиите на контейнера, в случай че има допълнително пространство на напречната ос. Той е подобен на 'justify-content', но за напречната ос вместо основната ос. Ако има само един ред гъвкави елементи, това свойство няма никакъв ефект. Пример:

.контейнер (

подравняване-съдържание: flex-start | гъвкав край | център | интервал между | пространство около | опъвам, разтягам;

)

Използване на свойства Flexbox

За да използвате оформлението на Flexbox, можете просто да зададете свойството на дисплея на HTML родителския елемент, като по-долу:

.flex-контейнер (

дисплей: -webkit-flex; / * Сафари * /

дисплей: гъвкав;

)

Ако предпочитате да се показва като вграден елемент, можете да напишете:

.flex-контейнер (

дисплей: -webkit-inline-flex; / * Сафари * /

дисплей: вграден флекс;

)

Вие се нуждаете само от това свойство да зададете родителския flex контейнер и неговите незабавни гъвкави елементи. Децата на контейнерите автоматично ще станат гъвкави елементи.

Препоръчителни курсове

  • Онлайн курс за безплатна jQuery
  • Онлайн курс за безплатни ъглови JS
  • Онлайн обучение на Mudbox
  • Обучение за сертифициране в безплатни Ruby

Свойства на Flexbox - Свойства на Flex контейнера

Има много начини за групиране на свойства на Flexbox и най-лесният начин да научите за тях е като ги разделите на Flex контейнер и свойства на елементи. Току-що разгледахме някои от свойствата на гъвкавия контейнер по-горе. Нека да разгледаме останалото:

  • Flex посока: ред или колона

Свойството на гъвкава посока може да бъде разположено като колони вертикално или редове хоризонтално. С посока на реда гъвкавите елементи се подреждат отляво надясно по подразбиране. Реверсът на реда променя тази посока надясно на ляво. По подразбиране посоката на колоната е отгоре-надолу, а функцията за обратно обръщане на колона обръща тази посока отдолу нагоре.

  • Flex-wrap: nowrap или увийте

Свойството flex-wrap контролира, ако децата на контейнера flex са разположени на няколко или единични линии и посоката, в която са подредени новите линии. Стойността на норапа вижда гъвкави елементи, показани в един ред, свити, за да се поберат по ширина на контейнера по подразбиране. Стойността на обгръщането вижда гъвкави елементи, показани в различни редове в посока отляво надясно или отгоре надолу. Можете да добавите обръщане назад, за да промените и поръчката. Стойността по подразбиране е nowrap.

  • Flex поток

Това свойство е по същество стенограма, за да настроите свойствата на гъвкава посока и гъвкаво увиване заедно. Стойността по подразбиране е 'row nowrap'. Пример:

.flex-контейнер (

гъвкав поток: ||

)

  • Обосновете съдържание

Свойството за оправдано съдържание има четири стойности: flex-start за подравняване на елементи в лявата част на контейнера; гъвкав край за подравняване на елементи към дясната страна; център за привеждане в съответствие с центъра; интервал между за подравняване на елементите с еднакво разстояние между тях, като първите и последните елементи са подравнени към краищата на контейнера; и разстояние за подравняване на гъвкавия елемент с еднакви разстояния около тях, включително първите и последните елементи. Flex-start е стойността по подразбиране.

  • Подреждане на-предмети

Това свойство има пет стойности: разтегнете се, за да мащабите гъвкави елементи, за да запълните цялата ширина или височина от началото на кръста до напречния край на контейнера; гъвкав старт за подреждане на елементи при напречния старт; гъвкав край за подреждане на елементи в напречния край; център за подравняване на елементи към центъра на напречната ос; и основна линия за подравняване на елементи, така че техните базови линии да бъдат подравнени. Stretch е стойността по подразбиране.

  • Align-съдържание

Това свойство подравнява линиите на гъвкав контейнер, когато има допълнително пространство в напречната ос. Стойностите му са: разтягане за разпределение на пространството след всеки ред; гъвкав старт за подреждане на елементи към напречния старт; гъвкав край за подреждане на елементи към напречния край; център за подреждане на елементи в центъра на напречната ос; интервал около, за да разпределите еднакво пространство около гъвкави елементи. Стойността по подразбиране е stretch.

Свойства на Flexbox - Свойства на елемента Flex

Сега, когато знаете за свойствата на контейнера Flexbox, нека разгледаме свойствата на артикула:

  • Поръчка

Това свойство контролира реда на появата на децата на гъвкавия контейнер. Те са подредени в контейнера flex по подразбиране.

.flex-item (

поръчка: ;

)

Можете да пренареждате гъвкави елементи, без да се налага да преструктурирате HTML кода. Стойността по подразбиране е нула.

  • Align-самостоятелно

Това свойство позволява подреждането по подразбиране на конкретен гъвкав елемент да бъде отменено. Можете да използвате стойностите от елементите за подравняване на тази собственост.

.flex-item (

подравняване-самостоятелно: автоматично | гъвкав старт | гъвкав край | център | базова линия | опъвам, разтягам;

)

Автоматичната стойност в подравняването се изчислява от стойността на елементите подравняване на родителския елемент. Ако елементът няма родител, вместо това се използва стреч.

Основни примери

Това е всичко, което трябва да знаете за използването на мрежовата подредба на CSS Flexbox. Сега е време да практикувате наученото. Ето няколко примера, които ви показват как всички тези свойства се събират. Нека започнем с нещо абсолютно просто:

.parent (

дисплей: гъвкав;

височина: 300px;

)

.child (

ширина: 100px;

височина: 100px;

марж: автоматично;

)

Това е пример за перфектно центриране. Стойностите на височината и ширината могат да се променят по ваше желание. Ключът тук е да зададете полето на "auto", така че гъвкавият контейнер автоматично да абсорбира всяко допълнително пространство. Достатъчно просто!

Сега, да преминем към добавяне на още няколко свойства: списък с шест елемента с фиксирани размери, които могат да бъдат автоматично сменяеми. Те трябва да бъдат равномерно разпределени по хоризонталната ос.

.flex-контейнер (

дисплей: гъвкав;

обосновка-съдържание: пространство около;

)

На следващо място, нека се опитаме да центрираме правилна подравнена навигация за средни екрани и да я направим едноколонна на малки устройства.

/* Голям */

.навигация (

дисплей: гъвкав;

гъвкав поток: обвиване на редове;

обосновка-съдържание: flex-end;

)

/ * Средни екрани * /

@media всички и (макс. ширина: 800 px) (

.навигация (

обосновка-съдържание: пространство около;

)

)

/ * Малки екрани * /

@media всички и (макс. ширина: 500 px) (

.навигация (

гъвкава посока: колона;

)

)

Време е да направите тази стъпка по-нататък! Нека да опитаме оформление на първо място за мобилни устройства с три колони, с футър и заглавие с пълна ширина и независимо от поръчката на източника.

.wrapper (

дисплей: гъвкав;

гъвкав поток: обвиване на редове;

)

/ * Казваме, че всички елементи са със 100% ширина * /

.header, .main, .nav, .aside, .footer (

гъвкавост: 1 100%;

)

/ * Разчитаме на поръчка на източник за мобилен първи подход * /

/ * Средни екрани * /

@media всички и (минимална ширина: 600 px) (

.aside (flex: 1 авто; )

)

/ * Големи екрани * /

@media всички и (минимална ширина: 800 px) (

.main (flex: 2 0px; )

.aside-1 (ред: 1; )

.main (ред: 2; )

.aside-2 (ред: 3; )

.footer (ред: 4; )

)

заключение

Това са само някои основни примери. Можете да играете много повече с оформления на CSS Flexbox и те са абсолютно безценни, ако искате да направите отзивчива уеб страница.

Препоръчителни статии

Ето няколко статии, които ще ви помогнат да получите по-подробна информация за свойствата на flexbox, кода на flexbox, а също и за css flexbox решетката, така че просто преминете през връзката, която е дадена, е дадена по-долу.

  1. HTML срещу XML - Топ разлики
  2. CSS3 срещу CSS - как са различни? (Infograph)
  3. HTML срещу CSS Основни разлики
  4. HTML5 срещу Flash

Категория:

Инструменти за уеб разработка