1<style>
2#datadiv {
3 width: 200px;
4 height: 200px;
5 border: 1px solid #c3c3c3;
6 display: flex;
7 flex-wrap: wrap;
8}
9
10#datadiv div {
11 width: 50px;
12 height: 50px;
13}
14</style>
15</head>
16<body>
17
18<h1>The flex-wrap Property</h1>
19
20<div id="datadiv">
21 <div style="background-color:red;">A</div>
22 <div style="background-color:green;">B</div>
23 <div style="background-color:yellow;">C</div>
24 <div style="background-color:blue;">D</div>
25 <div style="background-color:cyan;">E</div>
26 <div style="background-color:indigo;">F</div>
27</div>
1.container {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5}
6
7//My youtube:'https://www.youtube.com/HasibulIslambd'
1
2/*
3 flex is MIRACLE in web design
4 display: flex => can only be applied for the parent that hold another childs
5 controlling the children div's from the parent one
6*/
7.parent{
8 display: flex;
9 flex-direction: column; /* row is default*/
10 flex-wrap: nowrap;
11 /*
12 evert html tag inside this div will be placed as columns inside each other.
13 for example:
14 1_ our parent has 4 div inside it
15 2_ every div will take a width of 25% to fit its parent width
16 3_ assume that you add another div to group.
17 4_ now we have 5 children the width of each of them will be 100% / 5 => 20% for each
18 5_ so that the elements does not wrap
19 6_ everytime you add a new div the width will be calculated as follow:
20 100% / no. of childrens
21 */
22}
23.parent-1{
24 display: flex;
25 align-items: center;
26 justify-content: center;
27 /*
28 every div which his parent is .parent-1 will be centered horizanlty and vertically
29 */
30}
31.parent-2{
32 display: flex;
33 align-content: flex-end;
34 /*
35 align every child inside .parent-2 to the end of the div bounds
36 */
37}
38/*
39 Parent Flex Properties
40 flex-direction: row row-reverse column column-reverse [row is Default]
41 flex-wrap: wrap nowrap => [nowrap is Default]
42 flex-flow: flex-direction flex-wrap [ShortHand]
43 justify-content: flex-end flex-start center space-around space-between space-evenly [flex-start is default]
44 align-items: center stretch flex-end flex-start baseline [stretch is Default]
45 align-content: flex-start flex-end center space-around space-between space-evenly
46*/