CSS fleksboks (flexbox) darsi - egiluvchan quti

Fleksboks o'rganish uchun o'yin - Flesboks oshxonasi.
Fleksboks videolari - Flesboks asoslari, flex-direction, flex-grow va flex-basis.

CSS fleksboks nima?

CSS fleksboks - egiluvchan quti. Egiluvchan quti HTML unsurlarni tepaga, pastga, onga, chapga, o'rtaga joylash, orasida teng masofa bilan saflash, atrofida teng masofa bilan saflash, bir nechta qatorga o'tkazish kabi imkoniyatlarni beradi.

Masalan:

.quticha {
    border: 2px solid blue;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}
<div class="quticha">
    <div class="ichki-buyum">
        Balki birinchiman
    </div>
    <div class="ichki-buyum">
        Ikkinchiman
    </div>
    <div class="ichki-buyum">
        Men esa uchinchi
    </div>
</div>

Oddiy divlar
Oddiy divlar

Oddiy divlar, hech qanday egiluvchan qutisiz.

Endi CSSni sal o'zgartiramiz.

.quticha {
    display: flex;    border: 2px solid blue;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

display: flex
display: flex

Divlar bitta qatorga turib qo'lishdi. Huddi ularga display: inline-block berilgani kabi.

Agar .qutichaga height berilsachi.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

display: flex; height: 100px
display: flex; height: 100px

Har bitta ichki buyum cho'zildi. Demak ichki buyumlar egiluvchan qutining ichida tik o'q boyicha chozilarkan.

Yotiq o'q bo'yicha saflash (justify-content)

Agar shunday yozsamchi.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    justify-content: center;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

justify-content: center
justify-content: center

Nima bo'ldi? Markazlashish. Yotiq o'q bo'yicha markazlashuv sodir bo'ldi. Demak justify-content: center egiluvchan qutining ichidagi buyumlarni markazlashtiradi.

justify-content: flex-end
justify-content: flex-end

justify-content: flex-end ichidagi buyumlarni o'nga joylaydi.

justify-content: flex-start
justify-content: flex-start

justify-content: flex-start ichidagi buyumlarni chapga joylaydi. Bu odatiy qiymatdir, bu degadi justify-content yozmasangiz, brauzer o'zi flex-start ni qo'llaydi.

Endi justify-content olib tashlayman.

justify-content yo'q
justify-content yo'q

Tik o'q bo'yicha saflash (align-items)

Endi align-items qo'yaman.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    align-items: center;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

align-items: center
align-items: center

Demak align-items: center egiluvchan qutining ichidagi buyumlarni tik o'q boyicha markazlashtiradi.

align-items: flex-end egiluvchan qutining ichidagi buyumlarni pastiga joylaydi.

align-items: flex-end
align-items: flex-end

align-items: flex-start egiluvchan qutining ichidagi buyumlarni tepasiga joylaydi.

align-items: flex-start
align-items: flex-start

align-items: stretch egiluvchan qutining ichidagi buyumlarni tik o'q bo'yicha cho'zadi. align-items: stretch odatiy qiymatdir, shu deb align-items yozmasangiz stretch ishlaveradi.

align-items: stretch
align-items: stretch

align-items: baseline ni o'tmaymiz.

align-items: center bilan justify-content: center ni birga qo'llasam.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    align-items: center;    justify-content: center;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

align-items: center va justify-content: center
align-items: center va justify-content: center

Mutloq markazlashishni ko'ryapman. Ham tik o'q ham yotiq o'q bo'yicha.

Orada masofa (justify-content)

justify-content: space-around – buyumlarni atrofida teng masofa bilan saflash.

justify-content: space-around
justify-content: space-around
justify-content: space-between – buyumlarni orasida teng masofa bilan saflash.
justify-content: space-between
justify-content: space-between
justify-content: space-evenly – space-between kabi, lekin chegaralargacha masofa ham inobatga olinadi.
justify-content: space-evenly
justify-content: space-evenly

Endi justify-content ni olib tashlayman.

align-items: stretch
align-items: stretch

Tik o'q bo'yicha bitta buyumni saflash (align-self)

Endi HTML da ikkinchi buyumga ikkinchi sinfni qo'shamiz.

<div class="quticha">
    <div class="ichki-buyum">
        Balki birinchiman
    </div>
    <div class="ichki-buyum ikkinchi">        Ikkinchiman
    </div>
    <div class="ichki-buyum">
        Men esa uchinchi
    </div>
</div>

Va CSS da shu sinfga havo rang bilan align-self beramiz.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
}
.ichki-buyum {
    background-color: orange; 
    border-radius: 20px;
}
.ikkinchi {    align-self: center;    background-color: skyblue;}

Va natijada shu chiqadi:

align-self: center
align-self: center

Shunday qilib align-self egiluvchan qutining ichidagi tanlangan buyumlarni tik o'q bo'yicha joylaydi.

align-self: flex-start

align-self: flex-start
align-self: flex-start

align-self: flex-end

align-self: flex-end
align-self: flex-end

align-self: stretch

align-self: stretch
align-self: stretch

align-self: baseline ni o'tmaymiz.

Aylantirish (flex-direction)

fsdf flex-direction ni odatiy qiymati row. Bu degani - ichki buyumlar o'ndan chapga qarab joylashadi. Yotiq telefonni tik qo'ysangiz - mana sizga flex-direction xusisiyati row dan column ga o'zgaradi, va ichki buyumlar tepadan pastga joylashadi.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    flex-direction: column;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}

Mana nima bo'ladi.

flex-direction: column
flex-direction: column

Endi justify-content tik o'q bo'yicha saflaydi, align-items esa yotiq o'q bo'yicha.

justify-content

Endi justify-content: center yozsam.

flex-direction: column; justify-content: center
flex-direction: column; justify-content: center

justify-content: flex-end yozsam.

flex-direction: column; justify-content: flex-end
flex-direction: column; justify-content: flex-end

justify-content: flex-start yozsam.

flex-direction: column; justify-content: flex-start
flex-direction: column; justify-content: flex-start

justify-content: space-around yozsam.

flex-direction: column; justify-content: space-around
flex-direction: column; justify-content: space-around

justify-content: space-between yozsam.

flex-direction: column; justify-content: space-between
flex-direction: column; justify-content: space-between

justify-content: space-evenly yozsam.

flex-direction: column; justify-content: space-evenly
flex-direction: column; justify-content: space-evenly

Xullas, flex-direction: column yozsangiz, justify-content tik o'q bo'yicha saflaydi, align-items esa yotiq o'q bo'yicha.

Endi justify-content olib tashlayman.

flex-direction: column
flex-direction: column

align-items

align-items: flex-start

flex-direction: column; align-items: flex-start
flex-direction: column; align-items: flex-start

align-items: flex-end

flex-direction: column; align-items: flex-end
flex-direction: column; align-items: flex-end

align-items: center

flex-direction: column; align-items: center
flex-direction: column; align-items: center

align-items: stretch. align-items yozmasam stretch ishlaveradi, chunki u odatiy qiymatdir.

flex-direction: column; align-items: stretch
flex-direction: column; align-items: stretch

Endi align-item ni olib tashlayman.

align-self

CSS va HTML ni sal o'zgartiramiz.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    flex-direction: column;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}
.ikkinchi {    align-self: center;    background-color: skyblue;}
<div class="quticha">
    <div class="ichki-buyum">
        Balki birinchiman
    </div>
    <div class="ichki-buyum ikkinchi">        Ikkinchiman
    </div>
    <div class="ichki-buyum">
        Men esa uchinchi
    </div>
</div>

Va align-self: center shunday natijani beradi.

flex-direction: column; align-self: center
flex-direction: column; align-self: center

align-self: stretch yozsam. Bu odatiy qiymat.

flex-direction: column; align-self: stretch
flex-direction: column; align-self: stretch

align-self: flex-start yozsam.

flex-direction: column; align-self: flex-start
flex-direction: column; align-self: flex-start

align-self: flex-end yozsam.

flex-direction: column; align-self: flex-end
flex-direction: column; align-self: flex-end

Endi align-self ni olib tashlayman.

flex-direction: column; align-self yo'q
flex-direction: column; align-self yo'q

margin: auto

CSS ni yana o'zgartiraman.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
    flex-direction: column;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}
.ikkinchi {
    margin-top: auto;    background-color: skyblue;  
}

Va margin-top: auto shunday natijani beradi.

flex-direction: column; margin-top: auto
flex-direction: column; margin-top: auto

margin-bottom: auto yozsam.

flex-direction: column; margin-bottom: auto
flex-direction: column; margin-bottom: auto

Yana bitta buyum vaqtinchalik qo'shaylik.

margin-top: auto; margin-bottom: auto; yozsam.

flex-direction: column; margin-top: auto; margin-bottom: auto;
flex-direction: column; margin-top: auto; margin-bottom: auto;

margin-left: auto yozsam.

flex-direction: column; margin-left: auto
flex-direction: column; margin-left: auto

margin-right: auto yozsam.

flex-direction: column; margin-right: auto
flex-direction: column; margin-right: auto

margin-right: auto; margin-left: auto yozsam.

flex-direction: column; margin-right: auto; margin-left: auto
flex-direction: column; margin-right: auto; margin-left: auto

Vaqtinchalik buyumni qo'shib margin: auto yozsam (4 tomonlama margin).

flex-direction: column; margin: auto
flex-direction: column; margin: auto

flex-direction siz margin: auto

flex-direction ni olib tashlayman. flex-direction ni odayit qiymati row, shu deb buyumlar bitta qatorga turib qoladi. Va margin-left: auto bitta buyumga beraman.

.quticha {
    display: flex;
    border: 2px solid blue;
    height: 100px;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
}
.ikkinchi {
    margin-left: auto;    background-color: skyblue;  
}

margin-left: auto shunday natijani beradi.

margin-left: auto
margin-left: auto

margin-right: auto yozsam.

margin-right: auto
margin-right: auto

Yana bitta buyum vaqtinchalik qo'shaylik. margin-left: auto; margin-right: auto

margin-left: auto; margin-right: auto
margin-left: auto; margin-right: auto

margin-top: auto

margin-top: auto
margin-top: auto

margin-bottom: auto

margin-bottom: auto
margin-bottom: auto

Amaliy qollanishi

To'r

Egiluvchan qutidan foydalanib to'rni qilishni o'rganaylik.

<div class="quticha">
    <div class="ichki-buyum">
        Balki birinchiman
    </div>
    <div class="ichki-buyum">
        Ikkinchiman
    </div>
    <div class="ichki-buyum">
        Men esa uchinchi
    </div>
</div>
.quticha {
    display: flex;
    border: 2px solid blue;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
    width: 33.333%;}

width: 33.333% ga etirob bering. U deb har burum uchdan bir joyni egallaydi.

width: 33.333%
width: 33.333%

Yana uchta buyum qo'shaylik.

<div class="quticha">
    <div class="ichki-buyum">
        Balki birinchiman
    </div>
    <div class="ichki-buyum">
        Ikkinchiman
    </div>
    <div class="ichki-buyum">
        Men esa uchinchi
    </div>
    <div class="ichki-buyum">        To'rt    </div>    <div class="ichki-buyum">        Besh    </div>    <div class="ichki-buyum">        Oltinchi    </div></div>

joy yetarli emas
joy yetarli emas
Lekin endi nimagadur har buyum uchdan bir joyni egallamayapti. Nimaga? Chungi joy yetarli emas.

Lekin ikkinchi qatorga o'tishni ruhsat bersak, yetarlicha joy paydo bo'ladi.

.quticha {
    display: flex;
    border: 2px solid blue;
    flex-wrap: wrap;}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
    width: 33.333%;
}

width: 33.333%; flex-wrap: wrap
width: 33.333%; flex-wrap: wrap

.quticha {
    display: flex;
    border: 2px solid blue;
    flex-wrap: wrap;  
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
    width: 33.333%;
    padding: 5px;}

padding to'rni buzdi
padding to'rni buzdi

To'rimiz buzilib ketdi. Nimaga? Chunki endi har buyumning eni 33.333% + 5px (o'ndagi padding) + 5px (chapdagi padding). Bu degani har buyum uchdan biridan kattaroq, va bitta qatorda faqat ikkita buyum siga oladi.

Bu mumammoni hal etish uchun box-sizing dan foydalansa bo'ladi.

.quticha {
    display: flex;
    border: 2px solid blue;
    flex-wrap: wrap;  
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
    width: 33.333%;
    padding: 5px;  
    box-sizing: border-box;}

box-sizing esa to'rni to'g'irladi
box-sizing esa to'rni to'g'irladi

box-sizing nima qiladi? box-sizing: border-box ni yozsam, endi 5 pikselli pading o'sha 33.333 foizni ichiga kiradi. Bu degani 33.333% + 5px + 5px qilib hisoblanmaydi. 33.333 foiz o'sha 10 piksel bilan 33.333 foizdir.

Har buyumni ichiga yana unsur qo'shamiz.

.quticha {
    display: flex;
    border: 2px solid blue;
    flex-wrap: wrap;
}
.ichki-buyum {
    background-color: orange;
    border-radius: 20px;
    width: 33.333%;
    padding: 5px;
    box-sizing: border-box;
}
.tarkib {    background-color: lightgray;}
<div class="quticha">
    <div class="ichki-buyum">
        <div class="tarkib">            Balki birinchiman
        </div>    </div>
    <div class="ichki-buyum">
        <div class="tarkib">            Ikkinchiman
        </div>    </div>
    <div class="ichki-buyum">
        <div class="tarkib">            Men esa uchinchi
        </div>    </div>
    <div class="ichki-buyum">
        <div class="tarkib">            To'rt
        </div>    </div>
    <div class="ichki-buyum">
        <div class="tarkib">            Besh
        </div>    </div>
    <div class="ichki-buyum">
        <div class="tarkib">            Oltinchi
        </div>    </div>
</div>

width: 33.333%; flex-wrap: wrap
width: 33.333%; flex-wrap: wrap

Endi background-color: orange; olib tashlayman.

.quticha {
    display: flex;
    border: 2px solid blue;
    flex-wrap: wrap;
}
.ichki-buyum {
    /* background-color: orange; */    border-radius: 20px;
    width: 33.333%;
    padding: 5px; 
    box-sizing: border-box; 
}
.tarkib { 
    background-color: lightgray; 
} 

Va natijada shu chiqadi.

flexbox to'r misoli
flexbox to'r misoli

Endi moshinalar ma'lumotini qo'shaman.

<div class="quticha">
    <div class="ichki-buyum">
        <div class="tarkib">
            <strong>Spark 8000 🚜</strong> <br>            Yaxshi chiroyli moshina. <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
    <div class="ichki-buyum">
        <div class="tarkib">
            <strong>Traker 10000 🚙</strong> <br>            Kichkina kaptiva <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
    <div class="ichki-buyum">
        <div class="tarkib">
            <em>Shaxsiy tayyora 🛫</em> <br>            Sultonlar uchun. Juda qimmat. <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
    <div class="ichki-buyum">
        <div class="tarkib">
            <strong>Qayiq 300 ⛵</strong> <br>            Ummonda sayohat.   <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
    <div class="ichki-buyum">
        <div class="tarkib">
            <strong>Malibu 30000 🚗</strong> <br>            Yaxshi chiroyli moshina. Boylar uchun. <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
    <div class="ichki-buyum">
        <div class="tarkib">
            <strong>Velosiped 50 🚲</strong> <br>            Yaxshi ulov. Arzon va qulay. <br>            <img src="https://placeholder.pics/svg/100/59BFFF-7059FF" alt="">            <button>Sotib olish 💰</button>        </div>
    </div>
</div>

Va natijada shu chiqadi. 100x100 degan narsa - internatdan olingan rasmdir.

width: 33.333%; flex-wrap: wrap
width: 33.333%; flex-wrap: wrap

Markazlash

body {
    margin: 0;
    font-family: 'Segoe UI';
    font-weight: 300;
    font-size: 24px;
}
.rasm {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url(https://placeimg.com/1920/1080/nature);
    background-size: cover;
    background-position: center;
    height: 400px;
    
}
<div class="rasm">
    <div><strong>Saytim</strong></div>
    <div>Eski haydalgan moshinalar</div>
    <div><a href="#">Sotib olish</a></div>
</div>

Markazlash yo'q
Markazlash yo'q

Endi egiluvchan qutini qo'shaman, va markazlashni qo'llayman.

body {
    margin: 0;
    font-family: 'Segoe UI';
    font-weight: 300;
    font-size: 24px;
}
.rasm {
    background-image: linear-gradient(rgba(255, 255, 255, 0.705), rgba(255, 255, 255, 0.774)),
        url(https://placeimg.com/1920/1080/nature);
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;}

flexbox markazlash
flexbox markazlash

Ayrim buyumlarni o'nga, ayrim buyumlarni chapga joylash (imkoniyatnoma)

Aytaylik fleksboks dan foydalanib imkoniyatnomani qilmoqchimiz.

<div class="imkoniyatlar">
    <a href="#">FAYZ SAVDO</a>
    <a href="#">Bog'lanish</a>
    <a href="#">Narxlar</a>
</div>
body {
    margin: 0;
    font-family: 'Segoe UI';
}
.imkoniyatlar {
    background-color: lightgray;
    padding: 5px;
    display: flex;
}
.imkoniyatlar a {
    margin-right: 10px;
}

sodda imkoniyatnoma
sodda imkoniyatnoma

Hammasi yaxshi, ammo "Bog'lanish" va "Narxlar" havolalari on tomonda turishi kerak. Shuni to'g'irlash uchun, biz egiluvchan qutining xususiyatlaridan birini qo'llaymiz - margin: auto.

body {
    margin: 0;
    font-family: 'Segoe UI';
}
.imkoniyatlar {
    background-color: lightgray;
    padding: 5px;
    display: flex;
}
.imkoniyatlar a {
    margin-right: 10px;
}
.imkoniyatlar a.nom {    margin-right: auto;}
<div class="imkoniyatlar">
    <a href="#" class="nom">FAYZ SAVDO</a>    <a href="#">Bog'lanish</a>
    <a href="#">Narxlar</a>
</div>

Ko'rganingizdan "FAYZ SAVDO" ning margin-right: auto si qo'shni egiluvchan buyumlarni o'nga surdi. Shu "flexbox" ning imkoniyatlaridan biri.

Ammo yana bitta kamchilik bor. On burchakka nazar soling. "Narxlar" va va o'n chegarasining orasida bo'sh joy bor. U bo'sh joy margin-right: auto dan keldi. Uni olib tashlaylik.

buyumni 'itarish'
buyumni 'itarish'

body {
    margin: 0;
    font-family: 'Segoe UI';
}
.imkoniyatlar {
    background-color: lightgray;
    padding: 5px;
    display: flex;
}
.imkoniyatlar a {
    margin-right: 10px;
}
.imkoniyatlar a:last-of-type {    margin-right: 0;}.imkoniyatlar a.nom {
    margin-right: auto;
}

oxirgisidan margin olib tashlash
oxirgisidan margin olib tashlash

:last-of-type oxirgi degani. Demak oxirgi egiluvchan buyumda margin-right bo'lmasligi kerak. Shunday qilib o'ndagi teshik ham ketdi.