Kategoriler
Kodlama

FlexBox Cheat Sheets [CSS]

2021’e girdik ve CSS Flexbox’u hatırlayıp bilgilerimizi tazeleyelim.

CSS’de Flexbox kullanmayı seviyorum ve bu harika bir şey, önceden birçok farklı CSS kuralı yazarken Flexbox ile sadece bir satırda istediğim görüntüyü alabiliyorum.

Burada Joy Shaheb’in paylaşmış olduğu “FlexBox Cheat Sheets in 2021 || CSS 2021” makalesini paylaşmak istedim umarım işinize yarar.

İçindekiler

  1. FlexBox Architecture
  2. flex-direction
  3. justify-content
  4. align-content
  5. align-items
  6. align-self
  7. flex – grow | shrink | wrap
  8. Short Hands

It’s 2021! Let’s refresh Our CSS Flexbox Memory. Here’s a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021.

FlexBox Mimarisi

Flex Box model Architecture
Flex Box model Architecture

FlexBox Chart —

Flex Box property Value Chart
Flex Box property Value Chart

flex-direction

The Direction/Orientation in which flex-items are distributed inside flex-container.

Flex Direction
Flex Direction
Flex Direction
Flex Direction

justify-content

This property arranges flex-items along the MAIN AXIS inside the flex-container

justify content
justify content
justify content
justify content

align-content

This property arranges flex-items along the CROSS AXIS inside the flex-container. This is similar to justify-content

align content
align content
align content
align content

align-items

Distributes Flex-items along the Cross Axis

align items
align items

align-self

align self
align self

flex – grow | shrink | wrap

  • flex-grow : grows the size of a flex-item based on width of the flex-container.
  • flex-shrink : The ability for a flex item to shrink based on width of the flex-container. Opposite of flex-grow.
  • flex-wrap : Amount of Flex-item you want in a line/row.
flex grow flex shrink flex wrap
flex grow flex shrink flex wrap
flex wrap flex grow flex shrink
flex wrap flex grow flex shrink

Short Hands

  • flex : It is a shorthand to flex-growflex-shrink and flex-basis combined.
  • flex-basis : This is similar to adding width to a flex-item, but only more flexible. flex-basis: 10em; it will set the initial size of a flex-item to 10em. Its final size will be based on available space, flex-grow, and flex-shrink.
flex flex basis
flex flex basis

Kaynak: https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl

Ayrıca https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ adresinde denemeler yapabilirsiniz.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr