Како да користите Флек да своју веб локацију учините прилагодљивијом

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

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

Како да подесите ЦСС Флек екран

Ако нисте упознати са основе флексбокса, можете истражити ово ЦодеПен исечак. Садржи пример кода за једноставно подешавање флексбокса. Прво, мораћете да умотате подређене ставке под надређени див или „флексибилни контејнер“.

<див цласс="родитељ">
<див цласс="дете-ставка"></div>
<див цласс="дете-ставка"></div>
<див цласс="дете-ставка"></div>
</div>

Додајте дисплеј: флекс власништво надређеног див.

.родитељ {
 дисплеј: флек;
}

Како узгајати предмете у контејнеру

Тхе флек-гров својство омогућава подређеним ставкама да се прошире да попуне простор доступан у његовом родитељском див. Ово својство вам омогућава да одредите "однос" количине простора који свака ставка кутије може да заузме.

Да бисте додали флек-гров, додајте својство флек-гров ЦСС свакој од подређених ставки.

<див цласс="родитељ">
<див стиле="боја позадине: црвена; флек-гров: 1"></div>
<див стиле="боја позадине: наранџаста; флек-гров: 1"></div>
<див стиле="боја позадине: жута; флек-гров: 1"></div>
<див стиле="боја позадине: зелена; флек-гров: 3"></div>
<див стиле="боја позадине: плава; флек-гров: 1"></div>
</div>

.родитељ {
 ширина: 500пк;
 дисплеј: флек; 
}

Флек-гров од 0 за сваку ставку значи да се кутије неће проширити да попуне простор свог родитеља. 0 је подразумевана вредност за ово својство.

Флек-гров од 1 за сваку ставку ће приморати све кутије да се подједнако прошире како би се уклопиле у расположиви простор унутар родитеља.

Ако је једна од ставки имала већи раст савијања, на пример:

<див стиле="боја позадине: зелена; флек-гров: 3"></div>

Зелена кутија ће покушати да добије до три пута већу количину простора од осталих кутија.

Погледајте код за својство флек-гров у овоме ЦодеПен исечак да видите радни пример.

Како смањити предмете у контејнеру

У неким случајевима, ширина родитеља се може смањити и ставке унутар родитеља више неће стати унутра. Можете користити флек-схринк својство да смањи величину кутија. На овај начин, они могу остати задржани унутар родитеља.

Флек-схринк вам омогућава да одредите однос за колико свака ставка треба да се скупи.

Додајте својство флек-схринк подређеним див ставкама. Промените ширину родитеља и деце тако да се ставке не уклапају у контејнер.

<див цласс="родитељ">
<див стиле="боја позадине: црвена; флексибилно скупљање: 1"></div>
<див стиле="боја позадине: наранџаста; флексибилно скупљање: 1"></div>
<див стиле="боја позадине: жута; флексибилно скупљање: 1"></div>
<див стиле="боја позадине: зелена; флексибилно скупљање: 2"></div>
<див стиле="боја позадине: плава; флексибилно скупљање: 1"></div>
</div>

.родитељ {
 ширина: 500пк;
 дисплеј: флек; 
}
.родитељ див {
 ширина: 150пк;
 висина: 150пк;
}

Флек-схринк од 1 за све ставке значи да ће се све ставке подједнако смањити ако се ширина родитеља смањи.

Ако је један од ставки имао веће савијање, на пример:

<див стиле="боја позадине: зелена; флексибилно скупљање: 2"></div>

Зелена кутија ће покушати да се смањи двоструко више од осталих кутија.

Погледајте код за својство флек-схринк у овоме ЦодеПен исечак да видите радни пример.

Како гурнути ставке у следећи ред

Тхе флек-врап својство вам омогућава да гурнете ставке у следећи ред ако се не уклапају у ширину родитељског контејнера. Овде се предмети не скупљају, а моћи ћете да сачувате висину и ширину предмета.

Опције за својство флек-врап укључују:

флек-врап: новрап | омотати | омотати-обрнути

Додајте својство флек-врап родитељском флек-контејнеру. Уверите се да је ширина контејнера довољно мала, тако да не стане подређеним предметима у њему. Ово ће приморати све ставке које се преплављују у нови ред.

<див цласс="родитељ">
<див цласс="црвена"></div>
<див цласс="наранџаста"></div>
<див цласс="жута"></div>
<див цласс="зелена"></div>
<див цласс="Плави"></div>
</div>

.родитељ {
 ширина: 300пк;
 ивица: 1пк пуна црна;
 дисплеј: флек;
 флек-врап: омотати;
}
.родитељ див {
 ширина: 100пк;
 висина: 100пк;
}

Вредност премотавања ће позиционирати ставке почевши у горњем десном углу контејнера. Вредност врап-реверсе ће преместити ставке тако да почну у доњем десном углу контејнера. Када умотавате ставке, гураће ставке у нови ред изнад уместо испод.

Ако наведете висину на надређеном контејнеру, контејнер ће додати размак између редова ставки.

Ако желите да уклоните овај размак, али задржите висину родитељског дива, користите својство алигн-цонтент. Наведите својство алигн-цонтент као „флек-старт“ у надређеном див:

.родитељ { 
 ширина: 300пк; 
 висина: 300пк;
 ивица: 1пк пуна црна; 
 дисплеј: флек;
 флек-врап: омотати; 
 алигн-цонтент: флек-почетак;
}

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

Погледајте код за својство флек-врап у овоме ЦодеПен исечак да видим неке примере.

Како гурнути ставке у следећу колону

Ако користите другачији распоред (као што је колона), а и даље су вам потребни елементи за премотавање, можете користити флек-флов својство. Ово својство флек је комбинација својства флек-врап и флек-дирецтион.

Примери комбинација опција које можете да користите за својство флек-флов укључују:

флек-врап: ред новрап | цолумн новрап | ров врап | омотач колоне | ров врап-реверсе | премотавање колоне-обрнуто

Ово својство функционише слично својству флек-врап изнад. Додајте флек-флов у родитељски флек контејнер. Уверите се да је ширина родитељског контејнера довољно мала да натера подређене ставке да се омотају:

.родитељ {
 ширина: 300пк; 
 ивица: 1пк пуна црна; 
 дисплеј: флек; 
 флек-флов: омотач колоне;
}
.родитељ див {
 ширина: 100пк;
 висина: 100пк;
}

Ставке ће се премотати у наведеном правцу (ред или колона).

Погледајте код за својство флек-флов у овоме ЦодеПен исечак да видим неке примере.

Како променити редослед ставки

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

Бројеви не морају нужно да почињу од 1. Можете користити било које бројеве и интервале, а својство ордер ће поређати ХТМЛ елементе од најнижег до највишег.

Додајте својство налога свакој од ставки унутар родитељског флек контејнера:

<див цласс="родитељ">
<див цласс="црвена" стиле="редослед: 2"></div>
<див цласс="наранџаста" стиле="редослед: 1"></div>
<див цласс="жута" стиле="ред: 5"></div>
<див цласс="зелена" стиле="редослед: 4"></div>
<див цласс="Плави" стиле="редослед: 3"></div>
</div>

У овом случају, наранџаста кутија ће бити крајње десно, праћена црвеном, плавом, зеленом, затим жутом кутијом.

Погледајте код за својство налога у овоме ЦодеПен исечак да видим неке примере.

Експериментишите са више ЦСС својстава на вашој веб локацији

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

Такође можете сазнати више о флексибилним својствима која ће вам помоћи да ускладите ХТМЛ елементе на вашој веб локацији.

Како користити Флек за поравнавање ХТМЛ елемената

Реад Нект

О аутору