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