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

Својства флексибилности у ЦСС-у вам омогућавају да флексибилније и брже поравнате ставке. Ово га чини корисним када желите да ваши ХТМЛ елементи боље реагују унутар веб претраживача.

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

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

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

Да би било који флексибилни стил функционисао, мораћете да додате дисплеј: флекс својство родитељског флек контејнера.

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

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

Да бисте видели пример овог подешавања, погледајте и покрените код у овом ЦодеПен исечак.

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

Тхе флек-дирецтион својство одређује правац реда или колоне подређених ставки.

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

флек-дирецтион: ред | колона | ред-обрнути | колона-реверс

Мораћете да додате родитељски контејнер који окружује ставке које желите да поравнате.

ХТМЛ:

ЦСС:

.ред { бацкгроунд-цолор: ред; }
.оранге { бацкгроунд-цолор: наранџаста; }
.иеллов { бацкгроунд-цолор: иеллов; }
.греен { бацкгроунд-цолор: греен;}
.блуе { бацкгроунд-цолор: блуе; }
.пурпле { бацкгроунд-цолор: пурпле; }
.парент див {
 ширина: 40пк;
 висина: 40пк;
}

Примените својство флек-дирецтион на родитељски флек контејнер. Ово ће поравнати подређене див ставке.

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

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

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

Како поравнати ставке дуж попречне осе

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

Опције за својство алигн-итемс укључују:

алигн-итемс: флек-старт | флек-енд | алигн-итемс | истегнути

Додајте својство алигн-итемс у надређени контејнер да бисте поравнали његове потомке.

.парент {
 дисплеј: флек; 
 алигн-итемс: флек-старт;
}

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

Такође можете изабрати одакле почиње основна линија, као што је врх (прва основна линија) или дно (последња основна линија).

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

За ставке поравнања: основна линија за рад, уверите се да свака ставка има различиту висину или ширину (у зависности од осе коју користите).

​​​

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

Како да заобиђете поравнање на појединачним ставкама

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

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

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

Рецимо, на пример, да родитељски контејнер има стил савијања постављен на „ред“.

.парент {
 дисплеј: флек; 
 флек-дирецтион: ред;
}

Својство алигн-селф можете применити на појединачну ставку. Појединачна ставка ће користити стил својства алигн-селф и центрирати ставку преко надређеног контејнера.

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

Како распоредити линије преко попречне осе

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

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

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

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

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

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

Како поравнати ставке на главној оси

Тхе оправдати-садржај својство додаје десно, лево или централно поравнање подређеним ставкама. Такође шири ставке додавањем размака између њих када оправдава садржај.

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

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

Умотајте ставке које желите да поравнате испод родитељског флексибилног контејнера.

ХТМЛ:

ЦСС:

.ред { бацкгроунд-цолор: ред; }
.греен { бацкгроунд-цолор: лигхтгреен; }
.блуе { бацкгроунд-цолор: блуе; }

Додајте својство јустифи-цонтент у родитељски флекс контејнер.

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

Својство јустифи-цонтент такође подржава вредности наведене у спецификацији ЦСС Бок Алигнмент. Ово укључује вредности као што су "почетак", "крај", "лево" и "десно". Неки претраживачи ово не подржавају.

Својство јустифи-цонтент такође има „сигурну“ кључну реч коју можете да користите. Ово осигурава да елементи покушавају да остану у опсегу родитељског контејнера.

Такође се користи за спречавање губитка података, у случају да центрирате дугачку реч. Коришћење кључне речи сафе спречава краћи див да одсече прво и последње слово.

.парент {
 дисплеј: флек; 
 јустифи-цонтент: сигуран центар;
}

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

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

Како додати размак између ставки

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

Примените својство гапа на родитељски флекс контејнер.

.парент {
 дисплеј: флек;
 размак: 70пк;
}

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

.парент { 
 ширина: 300пк;
 размак: 120пк;
}

Ако користите флек-врап: врап да гурнете ставке у нови ред, количина празнине ће се такође применити на размак између редова.

.парент { 
 ширина: 300пк;
 флек-врап: омотати;
 размак: 120пк;
}

Поред тога, такође можете подесити ров-гап и колона-размак својства. Опет, мораћете да их примените на родитељски флекс контејнер.

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

.парент { 
 ров-гап: 120пк; 
}
.парент { 
 цолумн-гап: 120пк; 
}

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

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

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

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

11 корисних алата за проверу, чишћење и оптимизацију ЦСС датотека

Реад Нект

О аутору