Йөзү

Безнең җаваплы йөзү программаларын кулланып, теләсә нинди элементта, теләсә нинди ноктада йөзә.

Бу биттә

Гомуми күзәтү

Бу файдалы класслар элементны сулга яки уңга йөзәләр, яки CSS floatмилеген кулланып хәзерге күренеш зурлыгына нигезләнеп йөзүне сүндерәләр . !importantконкрет проблемалардан саклану өчен кертелгән. Алар безнең челтәр системасы белән бер үк күренеш нокталарын кулланалар. Зинһар, шуны онытмагыз: йөзү коммуналь хезмәтләренең флекс әйберләренә тәэсире юк.

Барлык күренеш зурлыкларында йөзү башлана

Барлык күренеш зурлыкларында йөзү

Барлык күренеш зурлыкларында йөзмәгез

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Onsаваплы

Valueәрбер кыйммәт өчен җаваплы вариацияләр дә бар float.

Йөзү SM (кечкенә) яки киңрәк күренешләрдә башлана

Йөзү MD (урта) яки киңрәк күренеш портларында башлана

Йөзү LG (зур) яки киңрәк күренешләрдә башлана

Флот XL размерлы (өстәмә зур) яки киңрәк

html

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Менә барлык ярдәм класслары:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Сасс

Коммуналь API

Флот коммуналь хезмәтләре безнең коммуналь API-да игълан ителә scss/_utilities.scss. Коммуналь API кулланырга өйрәнегез.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),