თვისება flex-basis

თვისება flex-basis ადგენს კონკრეტული flex-ბლოკის ზომას მასზე სხვა flex თვისებების გამოყენებამდე. ზოგადად, თვისება ადგენს ელემენტის ზომას მთავარი ღერძის გასწვრივ. ეს ნიშნავს, რომ თუ მთავარი ღერძი ჰორიზონტალურია - ეს თვისება ადგენს ელემენტების სიგანეს, ხოლო თუ ვერტიკალურია - მაშინ სიმაღლეს.

გამოიყენება კონკრეტულ flex ბლოკზე.

ეს თვისება არის შემოკლებული თვისების flex შემადგენელი ნაწილი.

სინტაქსი

cssსელექტორი {
  flex-basis: ნებისმიერი CSS ერთეული (და პროცენტები) | auto;
}

ნაგულისხმევი მნიშვნელობა: auto.

მაგალითი

დავუშვათ, მთავარი ღერძი ჰორიზონტალურია, ხოლო flex-basis-ს აქვს მნიშვნელობა 50px. ამ შემთხვევაში ელემენტების სიგანე იქნება 50px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* ღერძი ჰორიზონტალურია */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* ელემენტის ზომა */
  border: 1px solid green;
}

Результат:

მაგალითი

ახლა კი გადავაბრუნოთ ღერძი, თვისების flex-basis მნიშვნელობის შეცვლის გარეშე. ამ შემთხვევაში ელემენტების სიმაღლე იქნება 50px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* ღერძი ვერტიკალურია */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

იხილეთ აგრეთვე