1Display: flex
2Flex-direction: row | row-reverse | column | column-reverse
3align-self: flex-start | flex-end | center | baseline | stretch
4justify-content: start | center | space-between | space-around | space-evenly
1/*
2 Most Common Flexbox properties:
3
4 display: flex;
5 flex-direction: row / column; --> used to justify the direction of content
6 flex-wrap: wrap; --> holds the content inside flexbox container
7
8 These Properties are also part of flexbox and only apply on a container which contain flexbox property
9
10 Justify content:
11 center
12 start
13 end
14 baseline
15 space-around -->commonly used
16
17 Align items:
18 center
19 baseline
20
21 fr = fill up any available space
22
23*/
24
25.flexbox {
26 display: flex;
27 flex-direction: row;
28 flex-wrap: wrap;
29 justify-content: space-around;
30 /* column-count: 2;
31 columns: 2; */
32}
1/* Flex */
2.anyclass {
3 display:flex;
4}
5/* row is the Default, if you want to change choose */
6.anyclass {
7 display:flex;
8 flex-direction: row | row-reverse | column | column-reverse;
9}
10
11.anyclass {
12 /* Alignment along the main axis */
13 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
14}
1<!--basic--flex--layout-->
2<html>
3 <head>
4 <style>
5 .parent{
6 display: flex or inline-flex;
7 flex-direction: row or column;
8 flex-wrap: wrap or wrap-reverse;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="parent">
14 <div class="child-1"></div>
15 .
16 .
17 .
18 </div>
19 </body>
20</html>
1<div class="my-container"> <img src="my-picture.jpg" alt="scenic view" /> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse facilis provident culpa eos sed sunt voluptates.</p></div>.my-container { display: flex; flex-direction: row;}
1Please read flexbox & grid in CSS TRIX,
2make hands-on project watching (WESBOS videos - it's really useful)
3also try [FLEXBOX - froggy] and [GRID - garden] games