Овај чланак ће објаснити метод за постављање флек-базе у Таилвинд ЦСС.
Како поставити флексибилну основу у Таилвинд-у?
Да бисте поставили флек-основу у Таилвинд ЦСС-у, направите ХТМЛ датотеку. Затим користите „ основа-<величина> ” услужну класу у ХТМЛ програму и наведите величину флек ставке. Овај услужни програм поставља почетну величину флексибилних ставки. Да бисте осигурали промене, погледајте веб страницу.
Погледајте наведене кораке за практичну демонстрацију:
Корак 1: Поставите Флек основу у ХТМЛ програму
Направите ХТМЛ програм и користите „ основа-<величина> ” услужна класа за подешавање величине флек ставке. На пример, користили смо „ основа-1/4 ”, “ основа-1/3 ', и ' основа-1/2 ” услужни програми за постављање три флексибилне ставке:
< тело >
< див класа = 'флек х-20' >
< див класа = 'основа-1/4 бг-црвена-400 м-1' > 1 < / див >
< див класа = 'басис-1/3 бг-теал-400 м-1' > 2 < / див >
< див класа = 'основа-1/2 бг-наранџаста-400 м-1' > 3 < / див >
< / див >
< / тело >
овде:
- “ флек ” класа се користи за креирање флексибилног изгледа и прилагођавање величина подређеног елемента на основу расположивог простора.
- “ х-20 ” класа поставља висину <див> на 20 јединица.
- “ основа-1/4 ” класа поставља ширину унутрашњег <див> елемента на 25% његовог родитељског елемента.
- “ основа-1/3 ” класа поставља ширину унутрашњег <див> на 33,33% свог родитељског контејнера.
- “ основа-1/2 ” класа поставља ширину <див> на 50% његовог родитељског контејнера.
- “ бг-ред-400 ” класа примењује црвену боју позадине на <див>.
- “ бг-теал-400 ” класа поставља плаву боју на позадину <див>.
- “ бг-оранге-400 ” класа примењује наранџасту боју позадине на <див>.
- “ м-1 ” класа додаје маргину од 1 јединице око сваког елемента <див>.
Корак 2: Проверите излаз
Да бисте били сигурни да је флек-основа постављена и исправно ради, погледајте ХТМЛ веб страницу:
У горњем излазу се може видети флек-база према којој су стилизовани.
Закључак
Флек основа омогућава корисницима да креирају флексибилне распореде који се прилагођавају различитим величинама и резолуцијама екрана. Да бисте подесили флексибилну основу у Таилвинд ЦСС-у, „ основа-<величина> ” услужна класа се користи у ХТМЛ програму. Корисници треба да одреде величину флексибилне ставке и осигурају промене гледањем веб странице. Овај чланак је објаснио метод за постављање флек-базе у Таилвинд ЦСС.