The align-self property controls the align-items for individual items.
Note that align-items controls vertical alignment.
But while all flex items are the same height and the container’s height is auto, it can’t do anything, because everything is vertically the same.
You would have to either have items of differing height, or set a height for the container grater than the item height.
Also see you have a typo in the first .box class, that should be .box1
What effect were you looking to achieve?
Like @SamA74 says, align items work in the vertical, and you do have the box/box1 typo. I also noticed the align-item in box2, and nothing in box3.
The box2 item is a bit misleading because it’s the same height as the box3, and flex defaults to take up the space of the largest container.
To make it a bit easier to see, I tweaked yours to set the boxes to a smaller height, specified a height on the container itself, and set each box to a different align-items,
On a side note. White spaces can be your friend but can also be your biggest enemy. Eliminating unneeded white space probably would reduce some errors because they’ll be easier to spot.
<html lang="en">
<head>
<link rel="stylesheet" href="Flex.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox test</title>
</head>
<body>
<p id="Test1">Test</p>
<div class="Controller">
<div class="Controlled box1">Box</div>
<div class="Controlled box2">Box</div>
<div class="Controlled box3">Box</div>
</div>
</body>
</html>
.Controller{
background-color: black;
border: 10px solid ;
min-height: 300px;
font-size: 50px;
display: flex;
}
.Controlled{
border: blue solid 10px;
min-width: 120px;
margin: 10px;
background-color: blueviolet;
}
.box1{
min-height: 100px;
align-self:flex-end
}
.box2{
min-height: 100px;
align-self: center;
}
.box3{
min-height: 100px;
align-self: flex-start;
}
I was just trying to understand the concept.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.