Све о својствима флекбок-а

Концепт који стоји иза својстава Флекбок-а је пружање могућности спремнику да аутоматски мења ширину, висину и редослед својих предмета како би најбоље испунио расположиви простор. Ово може бити корисно за смештај предмета унутар различитих величина екрана и уређаја. Ставке се проширују да би се попунило било који слободни простор или се смањују како би се избегло преливање.

ЦСС решетка Флекбок за почетнике

ЦСС је једна од првих и најлакших ствари које се могу научити у развоју веба и дизајна, али не грешите његову једноставност због недостатка функција. Има бројне задивљујуће карактеристике и могућности спремне да се искористе, а једна од њих је његов релативно нови модул изгледа: Својства Флекбок-а.

Својства Флекбок-а један су од новијих изгледа доступних ЦСС3-у и о њему се може пуно научити. Овде смо упознати са изгледом и како га користити. Пре него што почнемо, ево мало позадине о својствима Флекбок-а:

Који су модуси распореда?

Најједноставније речено, ЦСС Флекбок решетка је режим изгледа. ЦСС има више постојећих режима изгледа. Режим распореда блокова (попут дисплеја: блок) већ дуго постоји. Изглед блокова је добар избор за стилизовање комплетних докумената. У ствари, веб прегледач подразумева неколико елемената попут див-а и одломака као ниво блока.

Још један уобичајени режим изгледа је линијски. Снажна ознака, улазна ознака и ознака сидра су примери елемената на линији. Алатке за програмере Гоогле Цхроме чак вам омогућавају да видите „стил рачунања“ елемента да бисте одредили ЦСС својства и вредности које су примењене на елементе које програмер није експлицитно поставио.

Релативно новији изглед Флекбок-а (Флексибилна кутија) дизајниран је као ефикаснија метода постављања, поравнавања и дистрибуције простора међу контејнерским предметима, чак и ако је величина ових предмета динамична или непозната. Отуда и термин „флексибилан“.

Концепт Флекбок Пропертиес

Најважнија ствар у својствима Флекбок-а је да је она у правцу кретања. Док је распоред блокова базиран на вертикалном положају, а редни распоред је хоризонтално заснован, Флекбок није ни једно ни друго. Блок и инлине раде добро у правим ситуацијама, али им недостаје флексибилност да подрже компликоване или велике апликације, посебно када је реч о промени оријентације, истезању, смањивању, промени величине и на други начин променијући димензије елемената.

Где се користе особине Флекбок-а?

Као и сваки други ЦСС изглед, Флекбок се најбоље користи у одређеним ситуацијама. Нарочито је погодно за мале распореде и компоненте апликације. За изглед већих размера, мудрији избор био би Грид изглед.

Зашто се преферира Флекбок?

Много програмера и дизајнера даје предност својствима Флекбок-а кад год могу (понекад пречесто!). То је зато што су својства Флекбока лакша за употребу; позиционирање елемената је много једноставније, тако да можете добити сложеније распореде са мање кодирања. Другим речима, процес развоја поједностављује.

Водич за Својства Флекбок-а

Сада када знате мало о својствима Флекбок-а и како и зашто делује, ево детаљног водича за изглед. Модел распореда састоји се од родитељског контејнера, који се такође назива "флексибилни спремник". Непосредна деца из овог контејнера називају се "флексибилни предмети".

Изглед је прошао кроз неколико итерација и промена синтаксе током година од када је први нацрт креиран 2009. Најновија Флекбок спецификација је подржана у следећим веб прегледачима:

  • Опера 17+
  • Интернет Екплорер 11+
  • Мозилла Фирефок 28+
  • Гоогле Цхроме 29+
  • Аппле Сафари 6.1+
  • Андроид 4.4+
  • иОС 7.1+

Терминологија која се користи у својствима Флекбок-а

Ево неколико основних терминологија које се користе у изгледу својстава Флекбок:

  • Приказ: Ова наредба се користи за дефинисање флексибилног спремника. То може бити линијски или блок, зависно од ставке. Такође дефинише флексибилни садржај за све ставке у спремнику. Пример:

.контејнер (

дисплеј: флекс; / * или инлине-флек * /

)

  • Редослед: Флек ставке се подразумевано постављају према изворном редоследу, али својство 'ордер' може контролисати редослед којим се ставке појављују у контејнеру. Пример:

.итем (

ордер:;

)

  • Смјер флек-а: Овим редослиједом се поставља главна осовина, дефинирајући правац кретања флексибилних предмета унутар контејнера. Флек предмети могу бити постављени пре свега у вертикалном или хоризонталном смеру. Пример:

.контејнер (

флекс-правац: ред | ред-реверсе | ступац | ступац-преокрет;

)

  • Раст флексибилности : Овај налог дефинира способност флексибилног предмета да се аутоматски повећа ако има простора. Може прихватити вриједност без јединице која служи као пропорција. Ова вредност диктира колико простора предмет треба заузети унутар флексибилног спремника. На примјер, ако су све ставке постављене на 1 флексибилни раст, преостали простор унутар спремника бит ће подједнако распоређен сву дјецу. Ако је вредност 2, преостали простор ће заузети два пута више простора од остатка. Пример:

.итем (

флексибилни раст:; / * подразумевано 0 * /

)

  • Флек-схринк: То чини супротно као флекс расте, јер смањује флексибилне предмете када је то потребно. Пример:

.итем (

флекс-скупљање:; / * подразумевано 1 * /

)

  • Флек-основа: Овај налог дефинира задану величину елемената прије него што се остатак простора расподијели. То може бити дужина, попут 5рем или 20%, или кључна реч. Кључна реч „ауто“ означава да се мери ширина и висина ставке, а кључна реч „садржај“ означава да је ставка димензија величине на основу њеног садржаја. Пример:

.итем (

флексибилна основа: | ауто; / * подразумевано аутоматски * /

)

  • Флек: Ово је комбинована скраћеница за сва горе наведена три својства: флексибилни раст, флексибилни раст и флексибилни скупљање. Задана вредност је '0 1 ауто'.

.итем (

флекс: нема | (||)

)

  • Садржај оправдања: Овај налог дефинира поравнавање главне оси и помаже у дистрибуцији додатног слободног простора ако је преостало ако су ставке нефлексибилне или су достигле своју максималну величину. Ово такође помаже у контроли поравнања ставке када постоји прелив.

.контејнер (

оправдати-садржај: флек-старт | флек енд | центар | размак између | простор око;

)

  • Поравнавање ставки: ово се користи за дефинисање заданог понашања изгледа флексибилних ставки на попречној оси тренутне линије. У основи је верзија 'оправдавајућег садржаја' на попречној оси, која је окомита на главну осовину. Пример:

.контејнер (

алигн-итемс: флексибилни старт | флек-енд | центар | основна линија | растезање;

)

  • Садржај поравнања: Овај поредак поравнава линије спремника у случају да на попречној оси има додатног простора. Слично је с 'оправдање-садржај', али за попречну ос уместо главне. Ако постоји само једна линија флексибилних предмета, ова особина нема никаквог ефекта. Пример:

.контејнер (

алигн-цонтент: флек-старт | флек-енд | центар | размак између | спаце-ароунд | растезање;

)

Коришћење својстава Флекбок-а

Да бисте користили изглед Флекбок-а, једноставно можете подесити својство приказа на ХТМЛ родитељском елементу, као ниже:

.флек-цонтаинер (

дисплеј: -вебкит-флек; / * Сафари * /

дисплеј: флекс;

)

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

.флек-цонтаинер (

дисплеј: -вебкит-инлине-флек; / * Сафари * /

дисплеј: инлине-флек;

)

Ово својство вам је потребно само за постављање надређеног флексибилног спремника и његових непосредних флексибилних предмета. Деца из контејнера ће аутоматски постати флексибилни предмети.

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

  • Онлине курс о бесплатном јКуери-у
  • Онлине курс о бесплатном кутном ЈС
  • Онлине обука на Мудбок-у
  • Обука за сертификацију у Фрее Руби-у

Флекбок Пропертиес - Својства флексибилних контејнера

Постоји пуно начина за груписање својстава Флекбок-а, а најлакши начин да сазнате о њима је подељењем на својства Флек спремника и предмета. Горе смо описали нека својства флексибилних контејнера. Погледајмо остало:

  • Смјер флека: ред или ступац

Својство флексибилног смера може се поставити као ступови вертикално или редови водоравно. С правцем реда, флексибилни елементи се подразумевано слажу с лева на десно. Обртање ретка мења овај смер у десно-улево. Смјер колоне је подразумевано одозго према дну, а функција преокрета колоне ово преокреће на правац одоздо према горе.

  • Флек-врап: новрап или омотајте

Својство флек-врап контролира ако су дјеца флексибилног спремника распоређена у више или једноструких линија и правац у којем су нове линије сложене. Вриједност садржања види флексибилне ставке приказане у једном реду, скратиле се према заданој ширини спремника. Вриједност замотавања види флексибилне ставке приказане у различитим редовима у смјеру с лијева на десно или одозго према доље. Можете додати врап-реверсе да бисте променили и поредак. Задана вредност је садарап.

  • Флек-флов

Ово својство је у основи скраћеница за међусобно постављање својстава правца савијања и савијања. Задана вредност је 'ров новрап'. Пример:

.флек-цонтаинер (

флексни проток: ||

)

  • Оправдајте-садржај

Својство оправданог садржаја има четири вредности: флек-старт за поравнавање ставки са леве стране спремника; флексибилни крај за поравнавање предмета на десној страни; центар да се поравна са центром; размак између за поравнавање предмета с једнаким размаком између њих, с тим да су прва и задња предмета поравнане према ивицама спремника; и размака за поравнавање флексибилног предмета с једнаким размаком око њих, укључујући прву и последњу ставку. Флек-старт је задана вредност.

  • Поравнајте ставке

Ово својство има пет вредности: протежу се да бисте повећали флексибилне предмете како бисте испунили читаву ширину или висину од попречног почетка до прелазног краја контејнера; флексибилни старт за слагање предмета на попречном старту; флексибилни крај за слагање предмета на попречни крај; средиште за поравнавање предмета према средини попречне осе; и основна линија за поравнавање ставки тако да су њихове основне линије усклађене. Стретцх је задана вредност.

  • Поравнајте садржај

Ово својство поравнава линије флексибилног спремника када у попречној оси има додатног простора. Његове вриједности су: протежу се за расподјелу простора након сваког реда; флексибилни старт за слагање предмета према унакрсном старту; флекс-енд за слагање предмета на попречни крај; центар за слагање предмета у средину попречне осе; простор-око за равномерно распоређивање простора око флексибилних предмета. Задана вредност је стретцх.

Флекбок Пропертиес - Својства флексибилних предмета

Сада када знате за својства контејнера Флекбок, погледајмо својства предмета:

  • Наручите

Ово својство контролира редослијед изгледа дјеце флексибилног спремника. Они су подразумевано наручени унутар флексибилног контејнера.

.флек-итем (

ордер:;

)

Можете променити редослед флексибилних ставки без потребе за реорганизацијом ХТМЛ кода. Задана вредност је нула.

  • Поравнајте се

Ово својство омогућава да се надјачи подразумевано поравнавање одређеног флексибилног предмета. Можете користити вриједности из поравнавања ставки за овај ентитет.

.флек-итем (

алигн-селф: ауто | флек-старт | флек-енд | центар | основна линија | растезање;

)

Аутоматска вриједност у положају поравнања израчунава се вриједношћу елемената поравнања на надређеном елементу. Ако елемент нема родитеља, уместо њега се користи растезање.

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

То је све што треба да знате за употребу изгледа ЦСС Флекбок решетке. Сада је време за вежбање онога што сте научили. Ево неколико примера који вам показују како се сва та својства спајају. Започнимо с нечим апсолутно једноставним:

.парент (

дисплеј: флекс;

висина: 300пк;

)

.цхилд (

ширина: 100пк;

висина: 100пк;

маржа: ауто;

)

Ово је пример савршеног центрирања. Вриједности висине и ширине могу се мијењати по жељи. Овдје је кључно поставити маржу на „ауто“, тако да флексибилни спремник аутоматски апсорбира сваки додатни простор. Једноставно!

А сада, прелазимо на додавање још неких својстава: листе са шест ставки фиксних димензија које се могу аутоматски прилагодити. Оне морају бити равномерно распоређене до хоризонталне осе.

.флек-цонтаинер (

дисплеј: флекс;

оправдати-садржај: простор око;

)

Затим покушајмо да центрирамо навигациону навигацију за средње екране и да је направимо једно-колонском на малим уређајима.

/ * Велика * /

.навигатион (

дисплеј: флекс;

флексни ток: омотавање редова;

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

)

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

@медиа алл и (мак. ширина: 800пк) (

.навигатион (

оправдати-садржај: простор око;

)

)

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

@медиа алл и (мак. ширина: 500пк) (

.навигатион (

флекс смер: колона;

)

)

Вријеме је да направите овај корак даље! Покушајмо са мобилним приказом са три колоне, подножјем и заглавом пуне ширине и независним од редоследа извора.

.враппер (

дисплеј: флекс;

флексни ток: омотавање редова;

)

/ * Кажемо да су сви предмети 100% ширине * /

.хеадер, .маин, .нав, .асиде, .фоотер (

флекс: 1 100%;

)

/ * Ослањамо се на наруџбу извора за приступ првом мобилном уређају * /

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

@медиа алл и (мин. ширина: 600пк) (

.асиде (флек: 1 ауто; )

)

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

@медиа алл и (мин. ширина: 800пк) (

.маин (флек: 2 0пк; )

.асиде-1 (ордер: 1; )

.маин (ордер: 2; )

.асиде-2 (ордер: 3; )

.фоотер (како: 4; )

)

Закључак

Ово су само основни примери. Можете се играти пуно више са изгледима ЦСС Флекбок решетки, а они су апсолутно непроцењиви ако желите да направите одзивну веб страницу.

Препоручени чланци

Ево неколико чланака који ће вам помоћи да сазнате више о својствима флекбок-а, флексбок кода, као и о цсс флексбок мрежи, зато само прођите кроз линк који је дат у наставку.

  1. ХТМЛ у односу на КСМЛ - најбоље разлике
  2. ЦСС3 вс ЦСС - у чему се разликују? (Инфограпх)
  3. ХТМЛ у односу на ЦСС Главне разлике
  4. ХТМЛ5 вс Фласх

Категорија:

Алати за веб развој