Flex CSS
flex
in container add
display:flex;
in child
flex:1;
or
flex:2;
1, is the base width and when another child has 2 it adds them up and distribute the space proportionally
order
Order organises children elements display order
align-items
By default all children elements come to same height. If we don't want to make them same sizes we can horizontally align them to start, end, center by default it was stretch
justify-content
in the parent if we write this
justify-content:space-between;
it aligns the children elements justified. If there are 3 child elements with a width of 30% remaining 10% will be padding between elements.
We can also use flex-basis: 30%
Responsiveness
@media (min-width:900px){
.container{
display:flex;
}
}
flex-wrap
by default this value is nowrap if want a row to be wrapped we need to give a value of wrap
flex-wrap:wrap;
Centering a content
if a parent element has display:flex; and we use margin:auto; in child element, child element will be centred in all directions.
flex-direction
default value is row and that's why it places child elements side by side. but if the value is changed to column layout will be vertical.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-grow
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink
This defines the ability for a flex item to shrink if necessary.
flex-flow
Combination of flex-direction and flex-wrap, Default is row nowrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
Tips
Selecting Child Elements
.selector:nth-child(1) { background-color: white;}
.selector:nth-child(2) { background-color: gray;}
