FlexBox

Հարգելի’ ընթերցող, համեմատելով իմ կողմից առաջիկայում Ձեզ ներկայացվելիք թեմաները, ես միանշանակ որոշեցի, որ այսօր անպայման Ձեզ պետք է ծանոթացնեմ մի շատ կարևոր թեմայի հետ, որը թերևս, ժամանակակից վեբ դիզայնի ոլորտում զբաղեցնում է շատ կարևոր դեր։ Այս անգամ խոսքը գնալու է այսպես կոչված flexbox layout – ի մոդուլի մասին։ Ես չեմ փորձի թարգմանել այս տերմինը, այլ կաշխատեմ հնարավորինս մատչելի բացատրել Ձեզ դրա իմաստն ու նշանակությունը։

Անհնար է չնկատել, որ այժմ արդեն մարդկության մեծամասնությունը համացանցից օգտվում է մի քանի սարքավորումների միջոցով(համակարգիչ, նոութբուք, պլանշետ, հեռախոս), որոնք ունեն չափսերով իրարից շատ տարբերվող էկրաններ, ինչը վկայում է այն մասին, որ մենք պարտավոր ենք կայքերի համար ստեղծել այնպիսի դիզայն, որը համաչափ և գեղեցիկ կդիտվի բոլոր տիպի էկրանների վրա։ Այլ կերպ ասած մենք պետք է կառուցենք “ճկուն” դիզայնով կայքեր։ Flexbox – ի  հիմնական իմաստն էլ հենց դրանում է կայանում։ Flex դիզայնի հիմնական առավելությունը կայանում է նրանում, որ այն բլոկներին տալիս է հնարավորություն զբաղեցնելու ողջ ազատ տարածությունը։ Այն ձգում է էլեմենտներին՝ ազատ տարածությունը լցնելու համար և սեղմում նրանց՝ իրենց սահմաններից դուրս գալը կանխելու համար։

Եվս մի առավելություն, որ ցանկանում եմ նշել, այն է, որ flex հատկությամբ օժտված էլեմենտները կախում չունեն ուղղությունից, ի տարբերություն սովորական հատկություններով էլեմենտների(block տիպի էլեմենտները դասավորվում են ուղղահայաց,  իսկ inline տիպի էլեմենտները՝ հորիզոնական)։

Շատ կարևոր է նկատել, որ flexbox – ը իրենից ներկայացնում է ոչ թե մեկ հատկություն, այլ մի քանի հատկությունների համախումբ, այլ կերպ ասած՝ այն իրենից ներկայացնում է  մի ամբողջ մոդուլ։ Այդ հատկություններից մի մասը վերաբերվում են “ծնող”(parent) էլեմենտներին, որոնք կոչվում են flex-container, իսկ  մյուս մասը՝ “դուստր” (child) էլեմենտներին, որոնք էլ իրենց հերթին կոչվում են flex-element։ Այստեղից բխում է մի շատ կարևոր հանգամանք, որն անհրաժեշտ է միշտ հիշել․ flex – հատկությունները ժառանգվող չեն։ Ի՞նչ է սա նշանակում։ Եթե մենք որևէ մի էլեմենտի օժտել ենք flex հատկությամբ,  մենք չպետք է ակնկալենք, որ այդ հատկությամբ պետք է օժտվեն նրա բոլոր դուստր էլեմենտները։ Այդ հատկությունները ստանում են միայն նրանց անմիջական ժառանգները։ Այս հանգամանքը Ձեզ ավելի հասկանալի կդառնա մի փոքր ուշ՝ կոնկրետ օրինակներ քննարկելու ժամանակ։

Եվ այսպես, էլեմենտը ստանում է flex հատկություններ կամ այն դառնում է flex այն ժամանակ, երբ մենք տալիս ենք նրան display: flex;

div․container { display: flex; }

Ամեն ինչ սկսվում է հենց այս պահից։ Այժմ արդեն, վերը նշված բլոկը համարվում է flex-container: Թե՛ container – ի և թե՛ child – երի հատկությունների ողջ ցանկը կարող եք տեսնել css-tricks.com կայքում, իսկ մենք սկսենք հմտանալ օրինակների միջոցով։ Մեր բլոգում Դուք արդեն հանդիպել եք հորիզոնական ընտրացանկի կառուցման մի տարբերակի (Հորիզոնական ընտրացանկի (drop down menu) կառուցում ), որն իրականացվում է էլեմենտներն inline-block  դարձնելով։ Այժմ մենք միասին կկառուցենք մեկ այլ պարզօրինակ հորիզոնական ընտրացանկ, այս անգամ արդեն flex – ի միջոցով։ Ստեղծենք պատահական հասարակ ցանկ․

<div class="block">
    <ul class="container">
        <li><a href="">List 1</a></li>
        <li><a href="">List 2</a></li>
        <li><a href="">List 3</a></li>
        <li><a href="">List 4</a></li>
     </ul>
</div>

Բնականաբար այս ցանկի կետերը դասավորվելու են իրար տակ, քանի որ դրանք իրենցից ներկայացնում են բլոկ էլեմենտներ։ Այժմ մեզ անհրաժեշտ է դասավորել այդ կետերը կողք-կողքի։ Մինչ այն իրականացնելը եկեք մի փոքր փոխենք ul, li և a էլեմենտների լռելյայն հատկությունները։

        .container{            
            list-style: none;
            padding: 0;
            margin: 0;
            background: #2b2a34;
        }        
        .container li a{
            display: block;
            padding: 20px 15px;
            text-decoration: none;
            color: #fff;
            font-family: Tahoma;
            white-spac: nowrap;
        }

որից հետո մեզ բավական է այս դեպքում parent հանդիսացող ul.container – ին դարձնել flex-container` նրան տալով display: flex:

.container{
    display: flex;
}

Եվ ահա մենք արդեն ունենք հորիզոնական դասավորված ցանկ։ Սակայն մեզ պետք է, որ ցանկի կետերը գտնվեն միմյանցից որոշ հեռավորության վրա, ընդ որում այդ հեռավորությունը կախված կլինի մեր էկրանի չափերից, այսինքն մեծ էկրանների դեպքում այդ հեռավորությունը կլինի մեծ, իսկ փոքր էկրանների համար՝ փոքր։

.container{
    display: flex;
    justify-content: space-around;
}

 Այստեղ մենք մի փոքր կանգ առնենք և ուշադրությունը սևեռենք էկրանի չափերի փոփոխման ժամանակ li էլեմենտների վարքագծին։ Եթե դուք հիմա աստիճանաբար փոքրացնեք Ձեր դիտարկիչը, ապա կտեսնեք, որ այդ փոքրացմանը զուգընթաց ցանկի կետերի միջև հեռավորությունը փոքրանում է։ Ընդ որում փոքրանում է այնքան ժամանակ, քանի դեռ ցանկի կետերը չեն հասել իրար։ Հասնելուց հետո նրանց շարժը դադարում է, և դիտարկչի ներքևի հատվածում առաջանում է հորիզոնական գիծ (scroll), որը ճկուն դիզայնի մեջ անթույլատրելի է։ Բանն այն է, որ երբ parent էլեմենտը դառնում է flex, նրան հաղորդվում է flex-wrap: nowrap; հատկություն, որը նշանակում է, որ անմիջական ժառանգ հանդիսացող էլեմենտները սեղմվելու դեպքում չեն դասավորվելու իրար տակ։ Այս դեպքում մենք պետք է փոխենք nowrap արժեքը wrap-ով։ Այսինքն՝

.container{
     flex-wrap: wrap:
}

Այժմ արդեն ցանկի կետերը, հասնելով իրար, հերթականությամբ ավտոմատ կերպով կընկնեն ներքև։ Մենք կարող ենք նաև ստիպել այդ անդամներին ներքև ընկնել ավելի շուտ՝ տալով նրանց չափեր flex-basis – ի միջոցով։ Այդ չափերն արդեն պետք է տանք ժառանգ էլեմենտներին։ Այսինքն՝

      .container li{
            flex-basis: 150px;
        }

Այսպիսով մենք ունեցանք բավականին ճկուն ընտրացանկ, որը տարբեր էկրանների վրա կգրավի իրեն հատկացված տարածությունները։

Այս գրառման մեջ ես Ձեզ կներկայացնեմ ևս մի օրինակ՝ նպատակ ունենալով ավելի ու ավելի ամրապնդել Ձեր գիտելիքները flex դիզայնի վերաբերյալ։ Եվ այսպես, այս անգամ վերցնենք գրառումներ, որոնցից յուրաքանչյուրը բաղկացած է նկարից, վերնագրից և ոչ շատ մեծ տեքստից։ Ասվածը HTML կոդի տեսքով կլինի այսպիսին․

<div class="container">
        <div class="post post1">
            <div class="post-img"><img src="https://lorempixel.com/600/300/nightlife/" alt=""></div>
            <div class="content">
                <h2>Post1 Title</h2>
                <div class="description">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum numquam accusantium nam reiciendis. Qui mollitia numquam dolore iusto ea, fuga praesentium corrupti voluptatem repellat ullam, aperiam rerum blanditiis tenetur at aliquam cum vel doloremque, iste tempora debitis ex pariatur.</p>
                </div>
            </div>
        </div>
        <div class="post post2">
            <div class="post-img"><img src="https://lorempixel.com/600/300/transport/" alt=""></div>
            <div class="content">
                <h2>Post2 Title</h2>
                <div class="description">
                    <p>Nostrum voluptas eveniet obcaecati magni unde rerum iure quod mollitia odit quos recusandae, nesciunt illo necessitatibus non perferendis dolore doloribus blanditiis quae ab rem molestiae voluptate nihil placeat accusamus. Aspernatur quae, porro, necessitatibus dolores explicabo nobis minus nemo numquam libero?</p>
                </div>
            </div>
        </div>
        <div class="post post3">
            <div class="post-img"><img src="https://lorempixel.com/600/300/nature/" alt=""></div>
            <div class="content">
                <h2>Post3 Title</h2>
                <div class="description">
                    <p>Hic dolorum saepe adipisci, repellendus, reiciendis, animi eaque esse reprehenderit illum veniam commodi! Natus eveniet, magnam! Delectus, natus nisi atque ex modi fugit repellendus aliquam nam id rem quos, eligendi facilis harum, explicabo soluta libero autem deleniti, asperiores. Ea, ad!</p>
                </div>
            </div>
        </div>
        <div class="post post4">
            <div class="post-img"><img src="https://lorempixel.com/600/300/cats/" alt=""></div>
            <div class="content">
                <h2>Post4 Title</h2>
                <div class="description">
                    <p>Sunt delectus commodi nam officiis enim nihil maiores repellendus ducimus laudantium magni quibusdam non numquam, deleniti vero molestias quo aut ipsam amet tenetur sapiente. A saepe hic, dolores minus veniam maxime non ea reprehenderit, fugit similique enim eum dolor error!</p>
                </div>
            </div>
        </div>
    </div>

Բնականաբար մեզ անհրաժեշտ է մեր այս արտահայտության համար գրել արտաքին ձևավորումն ապահովող CSS կոդ, որը մենք այժմ միասին կանենք flex-ի միջոցով։ Գեղեցիկ դասավորության համար վերնագիրը և տեքստը տեղադրենք նկարի կողքին, իսկ փոքր էկրանների դեպքում արդեն կարելի է այդքան մասը նորից իջեցնել նկարի տակ։

Նախ՝ կարելի է վերացնել որոշ էլեմենտների ստանդարտ ձևավորումներից մի քանիսը․

p, h2{
            margin: 0;
            padding: 0;
             font-family: Tahoma;
        }
.post-img img{
            width: 100%;
            height: auto;
            padding: 4px;
            border: 1px solid #ccc;
        }

այնուհետև ընդհանուր parent հանդիսացող բլոկին տանք առավելագույն լայնություն և դիտարկչի եզրերից հավասարաչափ հեռավորություններ։

.container{
            max-width: 1024px;
            margin: 0 auto;
            
        }

Կարելի է գրառումներից յուրաքանչյուրին տալ ներքևից մի փոքր բացատ , որոշակի ստվեր, ինչ-որ մի ֆոն և դարձնել flex-container, իսկ անմիջական ժառանգ հանդիսացող էլեմենտներին՝ իրար հավասար չափեր, որոնցից ավելի շատ սեղմվելու դեպքում նրանք կդասավորվեն իրար տակ։

.post{
            margin-bottom: 45px;
            box-shadow: 3px 3px 3px rgba(100,100,100,1);
            background: rgba(229, 205, 205, 0.38);
            padding: 15px 5px;
            
            display: -webkit-box;
            
            display: -webkit-flex;
            
            display: -ms-flexbox;
            
            display: flex;
            -webkit-flex-flow: row wrap;
                -ms-flex-flow: row wrap;
                    flex-flow: row wrap;
        }
        .post>div{
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 300px;
                -ms-flex: 1 1 300px;
                    flex: 1 1 300px;
            margin: 5px 15px;
        }

Ինչպես հիշում եք, նախածանցներն օգտագործում ենք, որպեսզի մեր կոդը ճիշտ աշխատի բոլոր դիտարկիչների վրա։ Իսկ այժմ ավելի գեղեցիկ տեսք ունենալու համար տեքստային մասը տեղադրենք ոչ թե վերևում, այլ մեջտեղի հատվածում։ margin: auto արտահայտությունը էլեմենտին բերում է մեջտեղ միայն հորիզոնական ուղղությամբ, ինչում կարող ենք համոզվել՝  description կլասսով բլոկի համար գրելով հետևյալ արտահայտությունը․

.description{
            margin: auto;
        }

Սակայն, եթե մենք նրա parent հանդիսացող content կլասսով բլոկը դարձնենք flex-container, իսկ անդամները դասավորենք իրար տակ, այսինքն ուղղահայաց առանցքի երկայնքով,

.content{
            display: flex;
            flex-direction: column;
        }

ապա մենք կունենանք այն ինչ ցանկանում ենք։ Հենց այս մասն էլ ապացուցում է վերը նշված հանգամանքը, որ flex – հատկությունները ժառանգվող չեն։ Եվ իրոք, description կլասսով էլեմենտը չէր ենթարկվում flexbox-ի օրինաչափություններին այքան ժամանակ, քանի դեռ նրա անմիջական ծնողին չդարձրեցինք flex-container՝ չնայած որ ծնողի ծնող հանդիսացող էլեմենտը հանդիսանում էր flex-container:

Եվ այսպես, հույս ունեմ՝ իմ քննարկած օրինակներն օգտակար եղան Ձեզ համար, և բնականաբար ես դեռ կքննարկեմ այս թեման իմ գրառումների մեջ։ Բոլոր տեսակի դժվարություններն ու խնդիրները կգտնեն իրենց լուծումները, եթե Դուք դրանք ներկայացնեք մեզ մեկնաբանությունների կամ քննարկումների բաժիններում։ Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով IT-Blog թիմ։