flexbox

container / parent

  • display
    • flex
    • inline-flex
  • flex-direction
    • row
    • row-reverse
    • column
    • column-reverse
  • justify-content
    • center
    • flex-end
    • flex-start
    • space-around  <-x->[ITEM]<-x-><-x->[ITEM]<-x-><-x->[ITEM]<-x->
    • space-between [ITEM]<-x->[ITEM]<-x->[ITEM]
    • space-evenly <-x->[ITEM]<-x->[ITEM]<-x->[ITEM]<-x->
  • align-items (Cross Axis Y)
    • center
    • flex-start
    • flex-end
    • stretch
    • baseline
  • flex-wrap – dodaje kolejną linię kiedy elementy nie mieszczą się w rzędzie
    • nowrap
    • wrap
    • wrap-reverse
  • align-content (Cross Axis Y) – całe rzędy wyrównuje względem kontenera
    • center
    • flex-start
    • flex-end
    • stretch
    • space-between
    • space-around

 

items / children

  • align-self
    • center
    • flex-start
    • flex-end
    • stretch
    • baseline
  • order (int)
    • -1 – pierwsze, przed wszystkimi
    • 0
    • 1
  • flex-grow (int) – ability to grow, reaguje na responsywność
    • 0  – nie pozwala zwiększać wielkości do szerokości dostępnej kontenera
    • 1 – obejmują cała powierzchnię (width: 100%)
    • 2 – dwa razy większy niż pozostałe
  • flex-shrink – kontroluje sposób w jaki elementy się zwężają,
    • inicial value: 1 – allow to shrink
    • 0 – no allowed to shrink, zostaje podana szerokość
  • flex (int)
    • 1 – całą możliwą powierzchnię jaka pozostałaby po odjęciu kontentu, paddingu, marginu pozostałych elementów
  • flex-basis (% of container or px) – zmniejsza się jako ostatni kiedy nie ma dostępnej przestrzeni podczas zmniejszania ekranu
    • 20%
    • 300px

flex: flex-grow flex-shrink flex-basis – flex: 0 1 300px

flex: 1 1 auto

  • flex-grow: 1 – element zostanie maxymalnie powiekszony
  • flex-shrink
  • flex-basis

 

środkowanie treści, tekstu w pionie i poziomie w bloku o nieokreślonej szerokości i wysokości dzięki flexbox:

    .box{
      display:flex;
      justify-content:center;
      align-items:center;
    }

 

generator flexbox

Align-items – demo

howtocenterincss.com/
css-tricks.com/snippets/css/a-guide-to-flexbox/

Philip Walton – web: Solved by Flexbox oraz Flexbugs

#css