Align Self

Align Self

November 01, 2024

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="AlignSelf.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align self</title>
</head>
<body>
    <div id="outer">
        <div id="red">red</div>
        <div id="green">green</div>
        <div id="blue">blue</div>
    </div>
</body>
</html>

CSS

#outer{
height:500px;
width: 500px;
border: 2px solid black;
display: flex;
flex-direction: row;
}
#red{
    height: 100px;
    width: 100px;
    background-color: red;
    align-self: flex-start;

}
#green{
    height: 100px;
    width: 100px;
    background-color: green;
    align-self: flex-end;
}
#blue{
    height: 100px;
    width: 100px;
    background-color: blue;
    align-self: center;
}

Comments