Flexbox. Bu näme üçin gerek?

Flexbox näme üçin gerek?

• Setiriň içindäki bloklar we boşluklar
  1. Bir setiriň içindäki blokda dikligine ortaça mazmuny düzmegiň aňsat usuly ýok.
  2. Iki meňzeş elementiniň bolmagy mümkin däl, olaryň biriniň giňligi, beýlekisiniň galan boşlugyny hiç hili kynçylyksyz doldurýar.
• Ýüzýän
  1. Ýüzýän elementleriň giňligini göterim hökmünde kesgitläniňizde, hasaplanan giňlik brauzerleriň arasynda yzygiderli tegeleklenmeýär (käbir brauzerler ýokaryk, käbirleri aşak tegelenýär)
  2. Köplenç ýokarky gutularyň / elementleriň daralmagynyň öňüni almak üçin ýüzýän sanlary «arassalamagyňyz» hökmanydyr.
  3. Elemetleriň biri-biriniň içindäki yzygiderli we ygtybarly dik merkezleşdirilmesini üpjün ediň.
• Tablisa we tablisanyň öýjügi
  1. Elementleriň töweregine goşmaça elementi gurşamak zerur (iň oňat dik merkezi nokadyny bellemek üçin, tablisa öýjügi tablisa formasyndaky elementleriň toplumynda bolmalydyr).
  2. Displeý hökmünde düzülen elementler saralmaýar: köp hatarly tablisa öýjügi.

 Flexbox bilen başlamak.

• Ýokary ukyplylygyna umumy garaýyş
  1. Mazmuny dikligine aňsatlyk bilen merkezleşdirip biler.
  2. Elementleriň wizual tertibini üýtgedip biler.
  3. Gutynyň içindäki elementleri awtomatiki görnüşde paýlap we olaryň arasyndaky bar bolan ýeri awtomatiki belläp we deňleşdirip biler.
  4. Sizi 10 ýaş kiçi edip görkezip biler (mümkin bolmadyk, ýöne stressi azaltmak üçin az sanly barlag synaglarynda (me) görkezildi).

Flexy almak (Flexbox)

• Dört esasy aýratynlygy bar: Ugry, deňleşdirilmegi, yzygiderliligi we çeýeligi.

Ideal dik merkezleşdirilen tekst — nusga çeşmesi

• Gyzyklanmagyň üç aýratynlygy:

1. display: flex: Bu elementi Flexbox hökmünde düzýär (gutynyň ýerine, setiriň içindäki gutusy we ş.m.).
2. align-item: Bu Flexbox-yň içindäki elementleri diagonaly ok boýunça deňleşdirýär (mysalymyzdaky teksti dikligine merkezleşdirýär).
3. justify-content: Bu, esasy mazmun okunyň merkezleşdirilmegini düzýär.)

Ideal dik merkezleşdirilen tekst

• Dikligine merkezleşdirilen ideal tekst – Mysal çeşmesiniň netijesi

Ýerini üýtgetme (Offset) elementleri

• Ýerini üýtgetme elementleri — Çeşme mysaly

• Ýerini üýtgetme (Offset) elementleri — Çeşmäniň netijesi

Elementleriň tertibini tersine öwürmek: aşakdaky mazmuny redaktirläniňizden soň

• flex-direction goşmak: ters setir;
•  margin-left üýtgetmesi: awtomatiki sag gyra boşlygy (margin-right) bilen: awtomatiki

Olaryň dik bolmagyny islesek näme etmeli?

• flex-direction üýtgetmesi: column bilen üýtgetmek
• Öçürmek

Ters garşylykly sütün

• Flex-direction bilen üýtgetme: tersine sütün

Dürli media soraglarynda dürli Flexbox maketleri

•  Mysal çeşmäniň netijesi

• Mysal çeşmäniň netijesi

Setir içindäki Flex

•  “Flexbox”, setiriň içindäki gutujygy we setiriň içerki tablisany doldurmak üçin içerki görnüşi bar.
• display: inline-flex

• Inline-flex — Mysal çeşmesiniň netijesi

Flexbox deňleşdiriş aýratynlyklary

•  Flexbox alignment bilen düşünilmegi zerur bolan iň möhüm zat ok düşünjesidir
• Üns berilmegi zerur bolan iki esasy ok bar, «major axis » we «transverse axis»

Flexbox deňleşdiriş aýratynlyklary

• Mysal çeşmesi

• Mysal çeşmesiniň netijesi

Align-Items aýratynlygy

• Elementleri transwers okda ýerleşdirmek
• Mümkin deňleşdirme derejeleri
  1. flex-start: Bir elementi flex-start-a bellemek, flex gutysynyň «Start» gyrasynda
  başlamagyna sebäp bolýar
  2. flex-end: flex-end derejesini bellemek elementiniň sazlamasy, elementi flex
  konteýneriň ujuna deňleşdirýär
  3. center: flex gutysynyň ortasyna goýýar
  4. baseline: Gutynyň ähli elementlerini asyl nusgasyna gabat getirmek üçin
  sazlaýar
  5. stretch: elementleriň flex gutysynyň ululygyna (transwers okda) uzalmagyna
  mümkinçilik berýär
• Aşakdakylary öňki mysal çeşmesine goşuň .FlexWrapper.align-items: center;
•  Mysal çeşmesiniň netijesi

• Mysal çeşmesiniň netijesi

Justify-Content aýratynlygy

• Esasy oklaryň deňleşdirilmegi justify-content bilen dolandyrylýar.
• flex-start, flex-end, merkez (center).
• space-between: Elementleriň arasynda deň mukdarda boşluk ýerleşdirýär.
•  Space-around: öz töweregine boşluk goýýar.

• Justify-content aýratynlygy: Mysal çeşmesiniň netijesi
  [justify-content: aralaryndaky boşluk (space-between);]

[justify-content : töweregindäki boşluk (space-around);]

Flex aýratynlygy

• Bu flex elementler üçin “width” aýratynlygyny ulandyk.
• Şeýle-de bolsa, “width” ýa-da “flex” aýratynlygyny kesgitlemek hem mümkin
• Üç aýratyn aýratynlyk:
  1. Flex-grow, boş ýer bar bolsa ulalyp bilýän beýleki flex elementlerine gabat
  gelýän mukdar.
  2. Flex-shrink, ýeterlik boş ýer bolmasa, “flex” elementiň beýleki “flex”
  elementlere garanyňda kiçelip bilýän mukdarydyr.
  3. Flex-basis flex elementiň ululygynyň esasy ölçegidir.

• Mysal çeşmesiniň netijesi

• Flex aýratynlygy
•  Mysal çeşmesi

• Mysal çeşmesiniň görnüşleri

Ýönekeý ýelmeşýän aşaky sözbaşy

• Mysal çeşmesi

• Mysal çeşmeleriniň netijesi

Çeşmeleriň tertibini üýtgetmek

• Mysal çeşmesi

• Mysal çeşmesiniň netijesi

Adaptirlenen suratlar

•  Ulanyjylara enjamlaryna we daşky gurşawyna görä laýyk görnüşi üpjün etmek;
•  Gizlin içerki aýratynlygy:

https://html.spec.whatwg.org/multipage/embedded-content.html

• Başga bir çözgüt talap edilende şekilleri üýtgetmek
• Şekili üýtgetmek, doly ýagdaýda elýeterli görnüş meýdanyna baglydyr
• Başga bir çözgüt talap edilende şekilleri üýtgetmek
  [Srcset bilen ýönekeý çözgüt üýtgemegi]
  <img src=»scones_small.jpg» srcset=»scones_medium.jpg 1.5x,
  scones_ large.jpg 2x» alt=»Scones taste amazing»>
  — Srcset we ölçegleri bilen ösen kommutirleme
  <img srcset=»scones-small.jpg 450w, scones-medium.jpg 900w»
  sizes=»(min-width: 17em) 100vw, (min-width: 40em) 50vw»
  src=»scones-small. jpg» alt=»Scones»>
• şekili üýtgetmek, doly ýagdaýda elýeterli görnüş meýdanyna baglydyr
  “Picture” elementi bilen surat dolandyryşy;
  <picture>
  <source media=»(min-width: 30em)» srcset=»cake-table.jpg»>
  <source media=»(min-width: 60em)» srcset=»cake-shop.jpg»>
  <img src=»scones.jpg» alt=»One way or another, you WILL get cake.»>
  </picture>

Bu makala Serdar Orazdurdyýewiň 2018-nji ýylda ýazan «Web programmirlemesi» atly elektron kitabynyň «Flexbox» diýen mowzugynyň maglumatlary esasynda taýýarlandy.