EN
CSS - flex item individual alignment (flexbox align-self)
0 points
In this article, we would like to show you how to override the default alignment for the indicated element in CSS.
Quick solution:
xxxxxxxxxx1
.container {2
display: flex; /* <----- required */3
}4
5
.item1 {6
/* ... */7
}8
9
.item2 {10
align-self: flex-start; /* <----- required */11
}12
13
.item3 {14
/* ... */15
}Screenshot:
In this example, we use flexbox self-align property to override default alignment specified for all items inside the container for an individual element.
align-self property values:
autoflex-startflex-endcenterbaselinestretch
In this case, we override center alignment with flex-start alignment for item2.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
border-radius: 10px;8
background: #3085d6;9
height: 200px;10
width: 200px;11
box-shadow: 3px 3px 20px 0px grey;12
display: flex; /* <-------------- required */13
justify-content: center;14
align-items: center; /* <-------- default alignment */15
}16
17
.item1 {18
margin: 2px;19
border: 1px solid #6e6e6e;20
border-radius: 5px;21
background: #ffc353;22
height: 50px;23
width: 50px;24
text-align: center;25
line-height: 50px;26
}27
28
.item2 {29
margin: 2px;30
border: 1px solid #787878;31
border-radius: 5px;32
background: #92ff53;33
height: 50px;34
width: 50px;35
text-align: center;36
line-height: 50px;37
align-self: flex-start; /* <----- overrides the default alignment */38
}39
40
.item3 {41
margin: 2px;42
border: 1px solid #575757;43
border-radius: 5px;44
background: #dd53ff;45
height: 50px;46
width: 50px;47
text-align: center;48
line-height: 50px;49
}50
51
</style>52
</head>53
<body>54
<div class="container">55
<div class="item1">1</div>56
<div class="item2">2</div>57
<div class="item3">3</div>58
</div>59
</body>60
</html>