Element alignment (align-items and align-self) in CSS3

align-items property

The align-items property also aligns items, but this time along the cross axis (when arranged as a row vertically, when arranged as a column – horizontally). This property can take the following values:

  • stretch : The default value that makes flex items stretch the full height (when stacked) or full width (when stacked) of the flex container
  • flex-start : items are aligned to the top (when stacked) or left (when stacked) of the flex container
  • flex-end : items are aligned to the bottom (when stacked) or right (when stacked) of the flex container
  • center : items are center-aligned on the flex container
  • baseline : elements are aligned according to their baseline

Alignment when inline:

?
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox In CSS3</title>
    <style>
        .flex-container {
            display: flex;
            border: 1px #ccc solid;
            height: 5em;
        }
 
        .flex-start {
            align-items: flex-start;
        }
 
        .flex-end {
            align-items: flex-end;
        }
 
        .center {
            align-items: center;
        }
 
        .baseline {
            align-items: baseline;
        }
 
        .flex-item {
            text-align: center;
            font-size: 1em;
            padding: 1.2em;
            color: white;
 
        }
 
        .largest-item {
            padding-top: 2em;
        }
 
        .color1 {
            background-color: #675BA7;
        }
 
        .color2 {
            background-color: #9BC850;
        }
 
        .color3 {
            background-color: #A62E5C;
        }
 
        .color4 {
            background-color: #2A9FBC;
        }
    </style>
</head>
 
<body>
    <h3>Flex-start</h3>
    <div class="flex-container flex-start">
        <div class="flex-item color1">Flex Item 1</div>
        <div class="flex-item color2">Flex Item 2</div>
        <div class="flex-item color3">Flex Item 3</div>
        <div class="flex-item color4">Flex Item 4</div>
    </div>
    <h3>Flex-end</h3>
    <div class="flex-container flex-end">
        <div class="flex-item color1">Flex Item 1</div>
        <div class="flex-item color2">Flex Item 2</div>
        <div class="flex-item color3">Flex Item 3</div>
        <div class="flex-item color4">Flex Item 4</div>
    </div>
    <h3>Center</h3>
    <div class="flex-container center">
        <div class="flex-item color1">Flex Item 1</div>
        <div class="flex-item color2">Flex Item 2</div>
        <div class="flex-item color3">Flex Item 3</div>
        <div class="flex-item color4">Flex Item 4</div>
    </div>
    <h3>Baseline</h3>
    <div class="flex-container baseline">
        <div class="flex-item color1">Flex Item 1</div>
        <div class="flex-item color2 largest-item">Flex Item 2</div>
        <div class="flex-item color3">Flex Item 3</div>
        <div class="flex-item color4">Flex Item 4</div>
    </div>
 
</html>


Similarly, the property works when arranged in a column. For example, let’s change the styles of the flex container as follows:

align-self property

The align-self property allows you to override the value of a property align-itemson a single element. It can take all the same values ​​plus the “auto” value:

  • auto : The default value where the element gets its value from the property align-itemsdefined in the flex container. If the style is not defined in the container, then the value is applied stretch.
  • stretch
  • flex start
  • flex end
  • center
  • baseline
?
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox In CSS3</title>
    <style>
        .flex-container {
            display: flex;
            border: 1px #ccc solid;
            justify-content: space-between;
            align-items: stretch;
            height: 12em;
        }
 
        .flex-item {
            text-align: center;
            font-size: 1em;
            padding: 1.2em;
            color: white;
        }
 
        .item1 {
            background-color: #675BA7;
            align-self: center;
        }
 
        .item2 {
            background-color: #9BC850;
            align-self: flex-start;
        }
 
        .item3 {
            background-color: #A62E5C;
            align-self: flex-end;
        }
 
        .item4 {
            background-color: #2A9FBC;
            align-self: center;
        }
    </style>
</head>
 
<body>
    <h3>Align-self</h3>
    <div class="flex-container">
        <div class="flex-item item1">Flex Item 1</div>
        <div class="flex-item item2">Flex Item 2</div>
        <div class="flex-item item3">Flex Item 3</div>
        <div class="flex-item item4">Flex Item 4</div>
    </div>
 
</html>

Topics

PHP Tutorials
SEO For Wordpress Websites
WordPress Tutorials
Node.js
TypeScript
React
jQuery
JavaScript
Turorials
HTML5
CSS3
PHP
Blog