flex-Properties for the Parent(flex container)

https://webclub.tistory.com/259?category=541913

Flexible box Layout - 플렉스 박스 #1

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

 

 

.container { display: flex; /* or inline-flex */ }

 

 

flex-direction

.container { flex-direction: row | row-reverse | column | column-reverse; }

 

 

 

 

 

flex-wrap

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

 

 

 

flex-flow : This is a shorthand for the flex-direction and flex-wrapproperties

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

 

 

 

justify-content

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

 

 

 

align-items

 

.container { align-items: stretch | flex-start | flex-end | center | baseline; }

 

 

align-content

 

.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }