Йөзү

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

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

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

Дәресләр

Класс белән йөзүне алыштырыгыз:

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

Миксинс

Яисә Сасс миксин белән:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Onsаваплы

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

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

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

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none