main-post-cover

    Təmiz CSS-da 8 faydalı imkan: 8) Pinterest tərzində imageboard

    Digər
    Code-News
    13.03.2019
    Farid Pardashunas

    #Step IT Academy tərəfindən təqdim olunur  




        CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasının son hissəsini paylaşırıq.
    Öncəki hissələr:

    8. Pinterest tərzində imageboard

        CSS Grid və Flexbox vasitəsi ilə müxtəlif adaptiv səhifədə elemetləri vertikal sıra ilə yerləşdirə biləcəyiniz maketlər yaratmaq olar.  Lakin onlar Pinterest tərzində imageboard yaratmaq istədikdə demək olar ki, faydasızdırlar.  Qeyd edək ki, bu tərzi xüsusi edən odur ki, burada hər bir vertikal elementin yerləşməsi ondan öncəki elementin hündürlüyündən asılıdır.

        Belə bir dizayna nail olmaq üçün ən effektiv vasitə CSS-in sütunlar üçün olan imkanlarıdır. Adətən onlar mətni qəzetlərə bənzər tərzdə bir neçə köşəyə bölmək üçün istifadə olunur.
    İşə düşməsi üçün elementləri div-ə salmalıyıq və column-width ilə column-gap istifadə etməliyik. Sonra isə elementlərin iki sütuna bölünməsinin qarşısını almaq üçün column-break-inside təyin etməliyik:

    Yuxarıdaki nümunədə:not() istifadə olunub.




        Bu məqalə "Təmiz CSS-da 8 faydalı imkan" barədə olan məqalələr seriyasının son hissəsi idi. Ümid edirik ki, bu məqalələr işinizdə sizə köməkçi olur. Əgər bənzər tərzdə paylaşımları CodeNews-da tez-tez görmək istəyirsinizsə, şərh bölməsində bunu qeyd etməkdən çəkinməyin. 

    Linki kopyala

    Bənzər xəbərlər

    Oxşar xəbərlər