⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

ЦСС Флекбок Генератор

Визуелно направите ЦСС флекбок изглед: флек-дирецтион, јустифи-цонтент, алигн-итемс, флек-врап и гап на контејнеру, плус флек-гров по детету, флек-схринк и флек-басис, све са прегледом уживо и ЦСС-ом који се може копирати.

Обрада... 0%

Резултат

Изглед флексбокса има два одвојена правилника — својства на контејнеру (флек-дирецтион, јустифи-цонтент, алигн-итемс, флек-врап, гап) и својства на сваком детету (флек-гров, флек-схринк, флек-басис) — и њихово мешање је најчешћи извор „зашто ово није центрирање / раст / вра бугс“ Овај генератор ставља оба правилника на екран одједном: промените било коју контролу контејнера или било које дететово поље и три нумерисана поља означена бојама се одмах ажурирају, тако да узрок и последица остају видљиви.

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

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

Као и свака алатка на овом сајту, генератор је бесплатан и ради у потпуности у вашем претраживачу: нема отпремања, нема налога, и наставља да ради ван мреже када се страница учита.

🛡️
Извршено у претраживачу

Ваши фајлови и улази никада не напуштају овај уређај. Обрада се одвија потпуно ван мреже. 100% безбедно.

Прихваћени формати и правила

  • Контроле контејнера: флек-дирецтион, јустифи-цонтент, алигн-итемс, флек-врап и унос празнине у пикселима, примењен уживо на преглед.
  • Подразумевано су три дечја кутија означена бојама (додајте до осам, уклоните на два), сваки са сопственим пољима флек-гров, флек-схринк и флек-басис.
  • ЦСС блок који се може копирати са правилом .флек-цонтаинер плус једним правилом .флек-итем-Н по детету које има неподразумевана флек својства.

Кључне предности

✓ Свака контрола контејнера и флек-гров, флек-схринк и флек-басис сваког детета ажурирају три нумерисана поља за преглед уживо, тако да видите тачно шта ваша флекбок правила раде пре него што додирнете листу стилова.
✓ Генератор штампа само подређена правила која се заправо разликују од ЦСС подразумеваних вредности, тако да копирани код остаје кратак и читљив уместо да поново поставља флек-гров: 0 на сваком пољу.
✓ Унапред подешене странице решавају распореде које људи траже по имену: центрирање дива, логотип-леве везе-десна навигациона трака и флексибилне колоне једнаке ширине — отворите један и алатка је већ конфигурисана.

Случајеви употребе

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