Flex box layout will be used to design the responsive layout structure without using float or positioning.
Flex box gives ability to alter the item's width/height to fill in the available space or shrinks them to prevent overflow.
Deployed this website on Netlify.
Built this website by following The Net Ninja youtube playlist.
-
display: flex
- defines a container to be in inline or block depending on the given value..container { display: flex; }
-
flex-direction
- defines the direction to the followed by the items..container { flex-direction: row; // arrange in horizontal direction flex-direction: column; // arrange in vertical direction }
-
justify-content
- defines the alignment of the items.- if the flex-direction is row then justify-content will align the items in horizontal direction.
- if the flex-direction is column then justify-content will align the items in vertical direction.
.container { justify-content: flex-start; // align to left justify-content: flex-end; //align to right justify-content: center; // align in center justify-content: space-between; // creates the space only between the items justify-content: space-around; // creates the space all around the items justify-content: space-evenly; // creates the space to the edges }
-
align-items
- defines the alignment of the items.- if the flex-direction is row then align-items will align the items in vertical direction.
- if the flex-direction is column then align-items will align the items in horizontal direction.
.container { align-items: flex-start; // align to top align-items: flex-end; // align to bottom align-items: center; // align in center align-items: stretch; // adjust the items to the screen align-items: baseline; // align in a line fashion }
-
flex-wrap
- items will be wrapped to next line when width of all items cannot fit within the page..container { flex-wrap: no-wrap; // items will be filled in same line flex-wrap: wrap; // items will wrap based on the width from top to bottom flex-wrap: wrap-reverse; // items will wrap based on the width from bottom to top }
-
flex-flow
- shorthand for theflex-direction
&flex-wrap
..container { flex-flow: column wrap; }
-
flex-grow
- occupies the whole space of width based on the value..item { flex-grow: 4; }
-
flex-shrink
- items to shrink based on the value..item { flex-shrink: 3; }
-
flex-basis
- define default size of the items..item { flex-basis: 200px; }
-
flex
- shorthand forflex-grow
,flex-shrink
andflex-basis
..item { flex: 1 1 200px; }
-
gap
- applies the spacing between items..container { gap: 10px; // applies 10px of gap to the row and column gap: 10px 20px; // applies 10px of gap to the row and 20px to the column row-gap: 10px; // applies 10px of gap only to the row column-gap: 10px; // applies 10px of gap only to the column }
-
order
- arrange the items in specific order..item { order: 5; // smaller number would be arranged first }