CSS Flexbox
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.
CSS Properties covered in this example
-
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 }