CSS-ში ფლექს ბლოკების განლაგება ჯვარედინი ღერძის მიმართ

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

მოდით ვცადოთ მაგალითებზე.

მაგალითი

მოდით მივმართოთ მთავარი ღერძი მარცხნიდან მარჯვნივ. ამ შემთხვევაში ჯვარედინი ღერძი იქნება მიმართული ზემოდან ქვემოთ. მოდით დავარეგულიროთ ჩვენი ბლოკების მდებარეობა როგორც მთავარი, ასევე ჯვარედინი ღერძის მიმართ.

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

ნახოთ, რა მივიღეთ:

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

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

მაგალითი

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

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

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

მაგალითი

ახლა მოდით მივმართოთ მთავარი ღერძი ზემოდან ქვემოთ. რადგან მთავარი ღერძი ვერტიკალურია, ჯვარედინი იქნება მიმართული მარჯვნიდან მარცხნივ. მოდით მივუბათ ბლოკები ორივე ღერძის მიმართ მათ დასაწყისთან:

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

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

მაგალითი

ახლა ჯვარედინი ღერძის მიმართ მივუბათ ბლოკები მის ბოლოსთან:

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

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

მაგალითი

მოდით მივუბათ ბლოკები ორივე ღერძის ბოლოსთან:

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

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

მაგალითი

მოდით შევცვალოთ მთავარი ღერძის მიმართულება - მივმართოთ იგი ქვემოდან ზემოთ. ამ შემთხვევაში ჯვარედინი ღერძი არ შეიცვლის თავის მიმართულებას, რადგან მთავარი ღერძი კვლავ ვერტიკალურია.

მოდით მივუბათ ბლოკები ორივე ღერძის დასაწყისთან:

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

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

პრაქტიკული ამოცანები

გაიმეორეთ გვერდი ამ ნიმუშის მიხედვით: