What is Flexbox?

.container {
display: flex;
}
.container {
flex-direction:
}
.container {
flex-direction: row; //items placed left to right
}
.container {
flex-direction: row-reverse; //items placed right to left
}
.container {
flex-direction: column; //items placed top to bottom
}
.container {
flex-direction: column-reverse; //items placed bottom to top
}
.container {
flex-wrap: nowrap; //all flex items will be on one line
}
.container {
flex-wrap: wrap; //items will wrap onto multiple lines from top to bottom
}
.container {
flex-wrap: wrap-reverse; //items will wrap onto multiple lines from bottom to top
}
.item {
flex-grow: 1
}
//if all items have flex-grow set to 1, the remaining space in the container will be divided equally between the items
.item {
flex-grow: 2
}
//items will receive twice as much of the remaining space as items with a flex-grow of 1
//so on and so forth as flex-grow increases

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store