ფლექს ელემენტების გასწვრივ განლაგება მთავარ ღერძზე CSS-ში

თვისება justify-content საშუალებას გაძლევთ განათავსოთ ელემენტები მთავარი ღერძის გასწვრივ. აქამდე თქვენ უკვე იცნობდით მნიშვნელობებს center, space-between, space-around, space-evenly. ახლა კი გავეცნოთ კიდევ რამდენიმე მნიშვნელობას.

მნიშვნელობა flex-start ათავსებს ელემენტებს მთავარი ღერძის დასაწყისში, ხოლო მნიშვნელობა flex-end - ბოლოში. მოდით შევხედოთ მაგალითებს.

მაგალითი

მივმართოთ მთავარი ღერძი მარცხნიდან მარჯვნივ, დავაყენოთ თვისება flex-direction მნიშვნელობა row. მივაწევთ ბლოკებს ღერძის დასაწყისში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* მთავარი ღერძი მარცხნიდან მარჯვნივ */
  justify-content: flex-start; /* ბლოკები მთავარი ღერძის დასაწყისში */
}

კოდის შესრულების შედეგი:

მაგალითი

ახლა მივაწევთ ბლოკებს ღერძის ბოლოს. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* მთავარი ღერძი მარცხნიდან მარჯვნივ */
  justify-content: flex-end; /* ბლოკები მთავარი ღერძის ბოლოში */
}

კოდის შესრულების შედეგი:

მაგალითი

ახლა მივმართოთ მთავარი ღერძი მარჯვნიდან მარცხნივ, დავაყენოთ თვისება flex-direction მნიშვნელობა row-reverse. მივაწევთ ბლოკებს ღერძის დასაწყისში, ანუ მარჯვენა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* მთავარი ღერძი მარჯვნიდან მარცხნივ */
  justify-content: flex-start; /* ბლოკები მთავარი ღერძის დასაწყისში */
}

კოდის შესრულების შედეგი:

მაგალითი

ახლა მივაწევთ ბლოკებს მთავარი ღერძის ბოლოს, ანუ მარცხენა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* მთავარი ღერძი მარჯვნიდან მარცხნივ */
  justify-content: flex-end; /* ბლოკები მთავარი ღერძის ბოლოში */
}

კოდის შესრულების შედეგი:

მაგალითი

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

მივმართოთ მთავარი ღერძი ქვემოთ, დავაყენოთ თვისება flex-direction მნიშვნელობა column.

მივაწევთ ბლოკებს მთავარი ღერძის დასაწყისში, ანუ ზედა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* მთავარი ღერძი ზემოდან ქვემოთ */
  justify-content: flex-start; /* ბლოკები მთავარი ღერძის დასაწყისში */
}

კოდის შესრულების შედეგი:

მაგალითი

ახლა მივაწევთ ბლოკებს მთავარი ღერძის ბოლოს, ანუ ქვედა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* მთავარი ღერძი ზემოდან ქვემოთ */
  justify-content: flex-end; /* ბლოკები მთავარი ღერძის ბოლოში */
}

კოდის შესრულების შედეგი:

მაგალითი

შევაბრუნოთ მთავარი ღერძი, მივმართოთ იგი ქვემოდან ზემოთ. ამისთვის თვისება flex-direction დავაყენოთ მნიშვნელობა column-reverse. ამ შემთხვევაში ბლოკები შეცვლიან თავის მდებარეობას - ღერძის დასაწყისში იქნება HTML კოდში ბოლო ბლოკი.

მივაწევთ ბლოკებს მთავარი ღერძის დასაწყისში, ანუ ქვედა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* მთავარი ღერძი ქვემოდან ზემოთ */
  justify-content: flex-start; /* ბლოკები მთავარი ღერძის დასაწყისში */
}

კოდის შესრულების შედეგი:

მაგალითი

მივაწევთ ბლოკებს მთავარი ღერძის ბოლოს, ანუ ზედა კიდეში. ამისთვის justify-content დავაყენოთ მნიშვნელობა flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* მთავარი ღერძი ქვემოდან ზემოთ */
  justify-content: flex-end; /* ბლოკები მთავარი ღერძის ბოლოში */
}

კოდის შესრულების შედეგი:

პრაქტიკული დავალებები