FLEXBOX IN CSS
As the name suggests, “Flexbox”, means a flexible box. Box which is flexible & changes can be done according to requirements.
It is simply a better way to align items in container.
To apply this,Display value of parent container should be set to Flex.
display:flex; //initialization
Now,Container(parent) is flex-container and items inside flex are flex-items.
Flex properties for flex-container:
FLEX-DIRECTION-
- flex-direction:row; //by default flex-direction is row
flex-items are placed horizontally consecutively.
2. flex-direction:column;
flex-items are placed verticallly one on top of each other.
3. flex-direction:row-reverse;
flex-items placed horizontally but in reverse manner i.e, items placed inside container from opposite direction horizontally.
4.similarly,for column-reverse, items goes vertically starting from bottom of container.
FLEX-WRAP-
flex items are forced onto one line or can wrap onto multiple lines.
1.flex-wrap: no-wrap; //Default value of flex-direction is no-wrap
2.flex-wrap: wrap; The flex items break into multiple lines
3.flex-wrap: wrap-reverse; flex items wrap from last item.
#To use flex-direction and flex-wrap together, we can use flex-flow and give values of direction and wrap respectively.
JUSTIFY-CONTENT-
justify-content will justify the content in horizontal direction
1.justify-content: center; items in the center horiz(equal space from left & right side)
2.justify-content: space-between; between every item there is equal-space
3.justify-content: space-evenly; between every item there is equal-space including first and last item.
Get Nehachandra’s stories in your inbox
Join Medium for free to get updates from this writer.
4.justify-content: space-around; space around each item is equal including first and last item.
ALIGN-ITEMS
align-items will justify the content in vertical direction .
1.align-items: center; items placed in center vertically
2.align-items: flex-end; items placed at bottom .
3.align-items: flex-start; items placed at top.
4.align-items: stretch; equal space between items vertically.
Flex properties for flex-items:
ORDER-
Higher the order, later it shows up in the container
e.g- item with order: 2; will be shown first then items of order >2.
FLEX-GROW
specifies how much the item will grow relative to the rest of the flexible items inside the same container.
e.g- item with flex-grow: 20; will grow more than item with flex-grow: 5;
FLEX-SHRINK
specifies how the item will shrink relative to the rest of the flexible items inside the same container.
more the value ,more item will shrink.
e.g- item with flex-shrink: 20; will shrink more than item with flex-grow: 5;
FLEX-BASIS
when flex-direction is set to row, flex-basis: will control width of the item.
when flex-direction is set to column flex-basis: will control height of the item.
#To use grow|shrink|basis all together-
flex: 2 3 230px; 2 for grow 3 for shrink 230px for basis respectively.
ALIGN-SELF
align-self: flex-start;
align-self: flex-end;
align-self: center;
