Базисный размер

flex-basis
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно задать начальный размер флекс-элемента.

Классы

Класс Значение
basis-auto flex-basis: auto;
basis-full flex-basis: 100%;
basis-1/2 flex-basis: 50%;
basis-1/3 flex-basis: 33.333333%;
basis-2/3 flex-basis: 66.666667%;
basis-1/4 flex-basis: 25%;
basis-2/4 flex-basis: 50%;
basis-3/4 flex-basis: 75%;
basis-1/5 flex-basis: 20%;
basis-2/5 flex-basis: 40%;
basis-3/5 flex-basis: 60%;
basis-4/5 flex-basis: 80%;
basis-1/6 flex-basis: 16.666667%;
basis-2/6 flex-basis: 33.333333%;
basis-3/6 flex-basis: 50%;
basis-4/6 flex-basis: 66.666667%;
basis-5/6 flex-basis: 83.333333%;
basis-1/12 flex-basis: 8.333333%;
basis-2/12 flex-basis: 16.666667%;
basis-3/12 flex-basis: 25%;
basis-4/12 flex-basis: 33.333333%;
basis-5/12 flex-basis: 41.666667%;
basis-6/12 flex-basis: 50%;
basis-7/12 flex-basis: 58.333333%;
basis-8/12 flex-basis: 66.666667%;
basis-9/12 flex-basis: 75%;
basis-10/12 flex-basis: 83.333333%;
basis-11/12 flex-basis: 91.666667%;
basis-px flex-basis: 1px;
basis-0 flex-basis: 0;
basis-1 flex-basis: 1%;
basis-2 flex-basis: 2%;
basis-3 flex-basis: 3%;
basis-4 flex-basis: 4%;
basis-5 flex-basis: 5%;
basis-6 flex-basis: 6%;
basis-7 flex-basis: 7%;
basis-8 flex-basis: 8%;
basis-9 flex-basis: 9%;
basis-10 flex-basis: 10%;
basis-11 flex-basis: 11%;
basis-12 flex-basis: 12%;
basis-13 flex-basis: 13%;
basis-14 flex-basis: 14%;
basis-15 flex-basis: 15%;
basis-16 flex-basis: 16%;
basis-17 flex-basis: 17%;
basis-18 flex-basis: 18%;
basis-19 flex-basis: 19%;
basis-20 flex-basis: 20%;
basis-21 flex-basis: 21%;
basis-22 flex-basis: 22%;
basis-23 flex-basis: 23%;
basis-24 flex-basis: 24%;
basis-25 flex-basis: 25%;
basis-26 flex-basis: 26%;
basis-27 flex-basis: 27%;
basis-28 flex-basis: 28%;
basis-29 flex-basis: 29%;
basis-30 flex-basis: 30%;
basis-31 flex-basis: 31%;
basis-32 flex-basis: 32%;
basis-33 flex-basis: 33%;
basis-34 flex-basis: 34%;
basis-35 flex-basis: 35%;
basis-36 flex-basis: 36%;
basis-37 flex-basis: 37%;
basis-38 flex-basis: 38%;
basis-39 flex-basis: 39%;
basis-40 flex-basis: 40%;
basis-41 flex-basis: 41%;
basis-42 flex-basis: 42%;
basis-43 flex-basis: 43%;
basis-44 flex-basis: 44%;
basis-45 flex-basis: 45%;
basis-46 flex-basis: 46%;
basis-47 flex-basis: 47%;
basis-48 flex-basis: 48%;
basis-49 flex-basis: 49%;
basis-50 flex-basis: 50%;
basis-51 flex-basis: 51%;
basis-52 flex-basis: 52%;
basis-53 flex-basis: 53%;
basis-54 flex-basis: 54%;
basis-55 flex-basis: 55%;
basis-56 flex-basis: 56%;
basis-57 flex-basis: 57%;
basis-58 flex-basis: 58%;
basis-59 flex-basis: 59%;
basis-60 flex-basis: 60%;
basis-61 flex-basis: 61%;
basis-62 flex-basis: 62%;
basis-63 flex-basis: 63%;
basis-64 flex-basis: 64%;
basis-65 flex-basis: 65%;
basis-66 flex-basis: 66%;
basis-67 flex-basis: 67%;
basis-68 flex-basis: 68%;
basis-69 flex-basis: 69%;
basis-70 flex-basis: 70%;
basis-71 flex-basis: 71%;
basis-72 flex-basis: 72%;
basis-73 flex-basis: 73%;
basis-74 flex-basis: 74%;
basis-75 flex-basis: 75%;
basis-76 flex-basis: 76%;
basis-77 flex-basis: 77%;
basis-78 flex-basis: 78%;
basis-79 flex-basis: 79%;
basis-80 flex-basis: 80%;
basis-81 flex-basis: 81%;
basis-82 flex-basis: 82%;
basis-83 flex-basis: 83%;
basis-84 flex-basis: 84%;
basis-85 flex-basis: 85%;
basis-86 flex-basis: 86%;
basis-87 flex-basis: 87%;
basis-88 flex-basis: 88%;
basis-89 flex-basis: 89%;
basis-90 flex-basis: 90%;
basis-91 flex-basis: 91%;
basis-92 flex-basis: 92%;
basis-93 flex-basis: 93%;
basis-94 flex-basis: 94%;
basis-95 flex-basis: 95%;
basis-96 flex-basis: 96%;
basis-97 flex-basis: 97%;
basis-98 flex-basis: 98%;
basis-99 flex-basis: 99%;
basis-100 flex-basis: 100%;

Описание

Адаптивный модификатор. Изменяет начальный размер флекс-элемента в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • basis-0 - начальный размер равен нулю;
    • basis-px - начальный размер равен 1px;
    • basis-1/2 ... basis-11/12 - начальный размер равен доли ширины родительского элемента;
    • basis-auto - автоматический начальный размер;
    • basis-full - начальный размер равен ширине родительского элемента;
    • basis-1 ... basis-100 - начальный размер равен доли ширины родительского элемента;

Относительная ширина

Относительный начальный размер рекомендуется использовать когда необходимо чтобы ширина флекс-элемента зависила от ширины родительского элемента.

Совместно с flexbox относительую ширину можно использовать для построения одномерной сетки.

basis-1/2
basis-1/2
basis-2/5
basis-3/5
basis-1/3
basis-2/3
basis-1/5
basis-4/5
basis-1/6
basis-5/6
basis-full
<div class="flex">
	<div class="basis-1/2"></div><div class="basis-1/2"></div>
	<div class="basis-2/5"></div><div class="basis-3/5"></div>
	<div class="basis-1/3"></div><div class="basis-2/3"></div>
	<div class="basis-1/5"></div><div class="basis-4/5"></div>
	<div class="basis-1/6"></div><div class="basis-5/6"></div>
	<div class="basis-full"></div>
</div>

Адаптивность

Для установки начального размера флекс-элемента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:basis-1/2 для установки начального размера в 50% для экранов размером Medium и больше.

<div class="md:basis-1/2"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью