CSS Flexbox

Flex ашиглан хуудсанд хуваалт үүсгэх

Flexbox Properties

Дотроо олон элементүүдийг агуулж буй элементийг container гэнэ. Харин container-ийн дотор байгаа элементүүдийг items гэнэ.

Container дээрх шинж чанарууд

1. display: Container доторх item-уудыг уян хатан байрлах боломжтой болгодог.

                        .container {
                            display: flex; /* or inline-flex */
                        }
					

Container дээрх шинж чанарууд

Container дээрх шинж чанарууд

2. flex-direction:

• row(default): Хэвтээ тэнхлэгийн дагуу зүүнээс баруун чиглэлд
• row-reverse: Хэвтээ тэнхлэгийн дагуу баруунаас зүүн чиглэлд
• column: Босоо тэнхлэгийн дагуу дээрээс доош чиглэлд
• column-reverse: Босоо тэнхлэгийн дагуу дээрээс доош чиглэлд

                        .container {
                            flex-direction: row | row-reverse | column | column-reverse;
                        }
                    

Container дээрх шинж чанарууд

3. flex-wrap: Эхний байдлаар flexbox дахь item-ууд нь нэг мөрөнд багтах гэж оролддог. Түүнээс нь болоод зарим нь хайрцагтаа багтахгүй, харагдахгүй болдог. Тэгэхээр flex-wrap-ыг ашиглаж илүү гарч буй зүйлсийг нь дараагийн мөрөнд оруулдаг.

Container дээрх шинж чанарууд

3. flex-wrap:

• nowrap(default): Flexbox дахь бүх item-ууд нэг мөрөнд орно.
• nowrap: Flexbox дахь нэг мөрөнд багтаагүй зүйлс дараагийн мөр рүү шилждэг. Ингэхдээ мөрнүүд нь дээрээс доош чиглэлтэй байна.
• wrap-reverse: Нэг мөрөнд багтаагүй зүйлс дараагийн мөрөнд орно. Гэхдээ мөрний чиглэл нь доороос дээш байна.

                        .container {
                            flex-wrap: nowrap | wrap | wrap-reverse;
                        }
                    

Container дээрх шинж чанарууд

4. flex-flow: flex-direction, flex-wrap 2-ын товч бичиглэл. Бичихдээ эхлээд чиглэл дараа нь wrap хийх үгүйг нь зааж өгнө.

                        .container {
                            flex-flow: column wrap;
                        }
                    

Container дээрх шинж чанарууд

5. justify-content: Энэ нь flexbox доторх хэвтээ тэнхлэгийн дагуу сул зайг хуваарилахад тусалдаг.

                                .container {
                                    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
                                }
                            

Container дээрх шинж чанарууд

5. justify-content:

• flex-start(default): flex-direction-ийн дагуу item-ууд нь хайрцгийн эхэнд байрлана.
• flex-end: flex-direction-ийн дагуу item-ууд нь хайрцгийн төгсгөлд байрлана.
• start: writing-mode-ийн дагуу item-ууд нь хайрцгийн эхэнд байрлана.
• end: writing-mode-ийн дагуу item-ууд нь хайрцгийн төгсгөлд байрлана.
• left: item-ууд хайрцгийн зүүн буланд байрлана. flex-start-тай адилхан ажиллана.
• right: item-ууд хайрцгийн баруун буланд байрлана. flex-end-тэй адилхан ажиллана.
• center: item-ууд нь хайрцгийн төвд байрлана.
• space-between: item-ууд нь хоорондоо ижил хэмжээний зай авна. Ингэхдээ хамгийн эхний болон сүүлийн item-ууд хайрцгийн ханатай нийлсэн байна.
• space-around: item бүр эргэн тойрондоо ижил хэмжээний зай авна.
• space-evenly: Хайрцгийн ирмэгээс эхний item хүртэлх зай бусад item хоорондын зайтай ижил.

Container дээрх шинж чанарууд

6. align-items: Энэ нь flexbox дахь item-уудын босоо тэнхлэгийн дагуу хэрхэн байрлахыг заадаг. (justify-content-ын эсрэг хувилбар гэж ойлгож болно.)

Container дээрх шинж чанарууд

6. align-items:

• stretch(default): Хайрцгийн хэмжээний дагуу сунаж байрлана.
• flex-start / start / self-start: item-ууд нь хайрцгийн босоо тэнхлэгийн эхлэл хэсэгт байрлана. flex-direction, wirting-mode-өөс хамаарна.
• flex-end / end / self-end: item-ууд нь хайрцгийн босоо тэнхлэгийн төгсгөл хэсэгт байрлана. flex-direction, writing mode-өөс хамаарна.
• center: item-ууд хайрцгийн босоо тэнхлэгийг голлож байрлана.
• baseline: item-ууд нэг шугамын дагуу зэрэгцэж байрлана.

                        .container {
                            align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
                        }
                    

Container дээрх шинж чанарууд

7. align-content: Энэ нь босоо тэнхлэгийн дагуух сул зайг хуваарилдаг. justify-content-ын хэвтээ тэнхлэгийн дагуу item-уудыг яаж байрлуулдагтай адил. Мөн энэ нь зөвхөн flexbox дотор нэгээс олон мөр байгаа үед ажиллана. (wrap хийгдсэн үед)

Container дээрх шинж чанарууд

7. align-content:

                        .container {
                            align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
                        }
                    

Container дээрх шинж чанарууд

8. gap, row-gap, column-gap: Энэ property нь зөвхөн item-уудын хоорондын зайг хянана. Хайрцгийн хүрээнээс авах зайнд нөлөөлөхгүй.

                        .container {
                            display: flex;
                            ...
                            gap: 10px;
                            gap: 10px 20px; /* row-gap column gap */
                            row-gap: 10px;
                            column-gap: 20px;
                        }
                    

Item дээрх шинж чанарууд

1. order: Энэ нь item-уудын хайрцаг дотор байрлах дарааллыг заадаг.

                            .item {
                                order: 5; /* default is 0 */
                            }
                        

Item дээрх шинж чанарууд

2. flex-grow: Энэ property нь item-ийн хэмжээг нэмэгдүүлдэг. Хэрэв item бүрт flex-grow-ийг 1 гэж өгвөл бүгд ижил зай эзэлнэ. Хэрэв аль нэг нь flex-grow 2 байвал тэр item нь бусад item-уудаасаа 2 дахин их зай эзэлнэ. (Яг 2 дахин авч чадахгүй ч аль болох тийм байхыг хичээдэг.)

                            .item {
                                flex-grow: 4; /* default 0 */
                            }
                        

Item дээрх шинж чанарууд

3. flex-shrink: Энэ property нь хэрэгцээтэй үед item-ийн хэмжээг багасгадаг.

                        .item {
                            flex-shrink: 3; /* default 1 */
                        }
                    

Item дээрх шинж чанарууд

4. flex-basis: Үлдсэн зайг хуваарилахаас өмнө элемэнтийн анхны хэмжээг тодорхойлдог. Үүнийг уртын хэмжээ (5rem, 20% гэх мэт) эсвэл түлхүүр үгээр зааж болно.

                        .item {
                            flex-basis:  | auto; /* default auto */
                        }
                    

Item дээрх шинж чанарууд

5. flex: Энэ нь flex-grow, flew-shrink, flex-basis нарын богино бичиглэл. 2 болон 3 дахь утгууд нь сонголтоор буюу flex-shrink, flex-basis-ын аль нэг нь байхад болно.

                        .item {
                            flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
                        }
                    

Item дээрх шинж чанарууд

6. align-self: Тухайн item-ийн байрлалыг өөрчилөхөд ашигладаг.

                        .item {
                            align-self: auto | flex-start | flex-end | center | baseline | stretch;
                        }