HTML-CSS/22.css at main · SatyamKaGithub/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* Understanding flexbox */

/* Much like the div and box container that you can create using HTML, flexbox is a type of container. Flexbox can overcome the
limitations caused by containers such as block and inline because it does a better job of scaling over larger web pages and also
provides more dynamic control of the containers. This is because it can grow, shrink and align the items inside it which give
better control to the programmer over the contents and styling of the items inside the container.  */

/* Before learning about the common layouts built using the flexbox, it is important to understand the properties inside it and
how flexbox works. Let’s examine some of the important characteristics of flexboxes and the properties that can be used to
configure them. */

/* Flexbox is single-dimensional, which means you can align it either along a row or a column and it is set to row alignment by
default. There are two axes, the main and cross-axis, much like the x and y-axis used in coordinate geometry. When aligned along
the row, the horizontal axis is called the main axis and the vertical axis is called the cross axis. For the items present inside
the flexbox container, the placement starts from the top-left corner moving along the main or horizontal axis. When the row is
filled, the items continue to the next row. Note that with the help of a property called flex-direction, you can instead flip
the main axis to run vertically and the cross axis will then be horizontal. In such a case, the items will start from top left
and move down along the vertical main axis. The properties you choose will help better control alignment, spacing, direction and
eventually styling of the container and items present inside it. */

/* Flexbox properties

 Original HTML code:
 <body>
  <div class="flex-container">
    <div class="box box1">  One..</div>
    <div class="box box2">  Two..</div>
    <div class="box box3">  Three..</div>
    <div class="box box4">  Four..</div>
    <div class="box box5">  Five..</div>
    <div class="box box6">  Six..</div>
    <div class="box box7">  Seven..</div>
  </div>
</body> */

/* Original CSS file: */
box{
    background-color: aquamarine;
    border-radius: 5px;
    margin: 2px;
    padding: 10px;
}

/* There are seven div containers inside the HTML file.

The corresponding CSS file contains rules for all seven div tags that have the box class. Note how two class names are given for each of the tags, one that is common among all classes and another independent of it. The style is applied to all the containers.

Now let’s add properties to the flex container by converting it into flex.

display: flex; */
.flex-container{
    display: flex;
}

/*Alignment properties

 Let’s examine a few alignment properties inside the flex. There are four main properties used to align a flex container and items present inside it:

1. justify-content. For item alignment on main axis.
4. align-items. For item alignment on cross axis.
3. align-self. For unique flex items on cross axis.
4. align-content. Used for packing flex lines and control over space.
Of these, justify-content and align-items are frequently used for the respective two axes.

Let’s first examine the use of justify-content which has a value of ‘left’ by default. */

/* justify-content */
/* CSS: */
.flex-container{
    display: flex;
    justify-content: center
}

/* flex-wrap:

The default for this property is ‘nowrap’ which means the items will span the entire width of the axis.  */
.flex-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* flex-direction:

This property is used to set the main axis, which is a ‘row’ by default. It basically means you are changing your ‘main’ axis
from horizontal rows to vertical columns. */
.flex-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

/* align-items:

The alignment on the cross-axis is done with the help of this property. Let’s change the value for it to ‘flex-end’. */
.flex-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:flex-end;
}

/* align-self:

This property can be used on individual items inside the flex. */
.flex-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:flex-end;
}
.box3{
    background-color: blanchedalmond;
    align-self: center;
}

/* gap:

gap property can be used to create space between the items along the main axis. You can also individually configure the gaps
in rows and columns using row-gap and column-gap properties.   */
.flex-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:flex-end;
    gap:10px;
}
.box3{
    background-color: blanchedalmond;
    align-self: center;
}


/* It’s important to understand how the changes in the main and cross axis affect the way you imagine and manipulate the
flexbox. Once you’ve had more practice you’ll be more comfortable with the use of these properties, and it will become easier
to use flexboxes and understand the flow and alignment of items inside the flexbox.  */