Flexbox және Grid: 2017 жылда CSS-вёрсткамен танысу

  • avatar
  • CSS / 8 маусым 2017, 17:04
  • 2999
css,flexbox

Мақаладан нені үйренесіздер


  • бұрындары CSS-разметкамен қалай жұмыс жасалды;
  • ескірген әдістер мен заманауи стандарттар арасындағы айырмашылық;
  • жаңа стандарттармен жұмысты қалай бастау керек (Flexbox және Grid);
  • сізді бұл жаңа стандарттар неге қызықтыруы керек;

Кіріспе


2012 не 2013 жылдары веб-бағдарламалаумен таныстым. Ақырындап бұл бағытты өздігімше үйрене бастадым. Тез арада CSS көп нәрсеге мағына беретінін түсіндім, бірақ тек интелектуал макеттер жасауда емес. Оны жөндеуге арналған хактардың саны соншалық көп, олардың бәрін үйрену өте қиын.

Бұрындары CSS-разметкамен қалай жұмыс жасалды


1. Тапсырма

Өзімізге қарапайым стандарт тапсырма қояйық: жанама панель және негізгі контент аймағы болатын екі секциядан тұратын бетті қалай жасаймыз. Екі секцияның биіктіктері контенттен тәуелсіз бірдей болуы керек.
Мынандай нәтиже алуға ұмтыламыз:
css layout

Алдымен бұл тапсырманы ескірген әдіспен қалай орындау керектігін көрсетемін.

2. Екі элементтен тұратын div құрамыз

Мысалы, <aside> және <main>:
</p>
<body>
  <aside>
    Lorem ipsum dolor sit amet.
  </aside>

  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </main>
</body>
<p>

Main секциясында мәтін көбірек екені түсінікті.
Aside секциясын көру үшін түспен ерекшелейміз:
aside {
color: #fff;
background-color: #8cacea;
}

3. Екі секцияны қатар қоямыз

Ол үшін мынандай стиль қолданамыз:
aside {
width: 25%;
}
main {
width: 75%;
}
aside, main{
float: left;
}

Бұл стиль бар кеңістікті пропорцияларға бөліп aside және main үшін float қояды.
Нәтиже:
css layout

Float-пен таныс еместер үшін: бұл элементтерді оңға немесе солға жылжытуға көмектесетін салыстырмалы түрде ескі әдіс.
Суретте көрініп тұрғандай, тапсырма әлі орындалмады — жанама панельдің биіктігі негізгі секцияның биіктігімен сәйкес емес.

4. display: table хакын пайдалану

Биіктіктері әр түрлі болып тұрған проблеманы шешу үшін display: table пайдаланамыз.
Егер бұл әдіспен таныс болмасаңыз, былай жасау керек:
  1. Негізгі контейнерді (біздің жағдайымызда body) таблица етеміз:
    body { display: table; }
  2. Float-ты алып тастап aside және main элементтерін таблица ұяшықтары ретінде көрсетеміз:
    aside, main{ display: table-cell; }
Осыны жасаған соң, тапсырма орындалды деп есептеуге болады. Яғни, бұрындары осы типтес тапсырмаларды осылай шешкен.
css layout

Ескі әдістер мен жаңа стандарттар арасындағы айырмашылық


Енді сіздерде бұрындары проблема қалай шешілгені жайлы түсінік пайда болған соң, Flexbox және Grid не үшін қажет екендігін қарап көрейік.
Flexbox және Grid — бұл CSS-пішімдеу үшін идеал шешім және заманауи стандарттар. Егер сізге CSS-кодты жақсы деңгейде жазу қажет болса міндетті түрде осыларды үйреніңіз.

Тапсырманы Flexbox пайдалану арқылы шешу


Flexbox форматтау контексті flex-контейнер құру арқылы инициализацияланады.
Негізгі элемент body және ол өзінің ішінде жанама панельді және негізгі аймақты сақтайды. Контейнер құрамыз:
body {
display: flex;
}

Нәтиже:
css layout
Пропорциялар жайлы ұмытпаймыз:
aside {
width: 25%;
}
main {
width: 75%;
}

Вуаля! Тапсырма шешілді деп есептеуге болады:
css layout

Flexbox арқылы әртүрлі нәрселер істеуге болады:
  • Секциаларды вертикал ортаға қою:
    html, body {
height: 100%;
}
body {
align-items: center;
}

    
    css layout
  • Ішкі элементтердің бірінің орналасуын өзгерту:
    aside {
align-self: center;
}

    css layout
  • HTML кодты өзгертпей-ақ элементтердің ретін өзгерту:
aside {
order: 2
}


Және мен мұнда Flexbox туралы тек айсберктің ұшын ғана көрсеттім.

Тапсырманы Grid арқылы шешу


CSS Grid — бұл мықты шешім. Жоғарыдағы тапсырманы осы әдіс арқылы да шешіп көрейік.
Басында тура Flexbox жағдайындағыдай бастаймыз. Контейнер құрамыз:
body {
display: grid;
}

Барлық CSS:
body {
display: grid;
background-color: #eeeeee;
}
aside {
color: #fff;
background-color: #8cacea;
}

Нәтижесі:
css layout

Grid әзірше барлық браузерде жоқ. Оны қолдану үшін Firefox 52 немесе Chrome 57 браузерлері қажет.
Соңғы суреттің жоғарыдағы суреттерден еш айырмашылығы жоқ. Сонда айырмашылық неде?
Егер жоғарыда жасағандай секцияларды пропорцияларға бөліп көрсек қалай болады екен:
aside {
width: 25%;
}
main {
width: 75%;
}


css layout
Иә, енді нәтиженің айырмашылығы бар, бірақ біздің тапсырмамызға келмейді. Жанама панель әлі бет жанында орналасқан жоқ.
Осы жерде Grid-тің негізгі айырмашылығы көрінеді. Grid-контейнер құрған соң display: grid арқылы контейнер ішіндегі қатарлар мен бағандарды анықтап алу керек.
Былай:
body {
grid-template-columns: 30% 70%;
}

Бір қатарлық шешім — әдемі, иә? grid-template-columns кестедегі бағандар пропорцияларын анықтайды.
css layout
Бірақ Grid арқылы одан да көп нәрселер жасауға болады.
Алдымен өзгерістер айқын көрінуі үшін басты секцияға түс береміз:
main {
background-color: rgba(39,174,96 ,1);
color: #fff;
}

css layout

Grid-тің қандай жақсы нәрселері бар екенін қарап көрейік:
  • Бағандар арасында бос орын көрсетуге болады:
body {
grid-column-gap: 15px;
}

  • Қанша баған қажет болса сонша баған құруға болады. Жоғарыдағы мысалдар aside және main секцияларынан тұратын екі ғана баған еді. Тағы екеуін қосамыз:
</p>
<body>
  <aside>
    Lorem ipsum dolor sit amet.
  </aside>

  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </main>

  <aside>
    Lorem ipsum dolor sit amet.
  </aside>

  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </main>

  <aside>
    Lorem ipsum dolor sit amet.
  </aside>

  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </main>

</body>
<p>

css layout
Қосылған екі баған да 30% / 70% пропорциясына сәйкес.
  • Қатарлар арасында бос орын көрсете аламыз:
body {
grid-row-gap: 15px;
}


css layout
Қысқартып: grid-gap: 15 px деп жазуға болады, grid-row-gap және grid-column-gap деп отырудың орнына.
  • Қатарлардың өлшемдерін көрсетуге болады:
body {
grid-template-rows: 200px 300px 400px;
}


css layout
Енді бірінші, екінші және үшінші қатардың биіктіктері 200, 300 және 400 пиксель.
Бастапқыда осы да жетіп артады — бірақ бұл бәрі емес.

Жаңа стандартпен жұмыс жасауды қалай бастауға болады?


Flexbox және Grid разметка үшін қолайлы екенін көрдіңіздер. Қалай бастау керек?
Алдымен осы мақаладағы мысалдармен біраз шынығып алуды ұсынамын. Содан кейін күрделірек заттарды үйрене аласыз. Және ұмытпаңыз әлі Grid барлық браузерлерде жоқ.

Сізді бұл жаңа стандарттар неге қызықтыруы керек?


Егер сіз әлі де Flexbox және Grid пайдаланған дұрыс екенін түсінбеген болсаңыз, онда ескі әдістерді пайдалану кезінде пайда болатын проблемаларды келтірейін:
  • егер clearfix және float блоктарды пайдаланатын болсаңыз, оларда көптеген проблемалар болуы мүмкіндігін біліп жүріңіз;
  • абсолют орналастыру кезінде элементтер бірінің үстіне бірі шығып кетуі мүмкін;
  • display: table пайдаланған кезде көп қажет емес разметкалар пайдалануға тура келеді;
  • inline-block пайдаланған кезде бос орындармен проблемалар болады.
Егер сіз веб-бағдарламалаумен айналысуды енді ғана бастаған болсаңыз онда бірден Flexbox және Grid пайдалануға кірісудің қажеті жоқ. Алдымен Bootstrap немесе басқа фреймворктарды қарап көріңіз.
«How To Approach CSS layouts in 2017 — and beyond» мақаласынан аударма.
  • +1
0 пікір
Тек тіркелген қолданушылар ғана пікір қалдыра алады.