align-self

해당하는 요소를 수직방향(세로)으로 정렬한다

 

 

1. flex-end일때

<style>
        #flexContainer {
            background-color: #c9c5c5;
            width: 500px;
            height: 500px;
            display: flex;
        }

        .component1 {
            background-color: rgb(184, 224, 39);
            width: 50px;
            height: 50px;
            align-self: flex-end;
        }

        .component2 {
            background-color: rgb(71, 110, 194);
            width: 50px;
            height: 50px;
        }

        .component3 {
            background-color: rgb(194, 45, 65);
            width: 50px;
            height: 50px;
        }
    </style>
    
     <div id="flexContainer">
        <div class="component1">A</div>
        <div class="component2">B</div>
        <div class="component3">C</div>
    </div>

2. center일때

<style>
        #flexContainer {
            background-color: #c9c5c5;
            width: 500px;
            height: 500px;
            display: flex;
        }

        #flexContainer {
            background-color: #c9c5c5;
            width: 500px;
            height: 500px;
            display: flex;
        }

        .component1 {
            background-color: rgb(184, 224, 39);
            width: 50px;
            height: 50px;
            align-self: center;
        }

        .component2 {
            background-color: rgb(71, 110, 194);
            width: 50px;
            height: 50px;
        }

        .component3 {
            background-color: rgb(194, 45, 65);
            width: 50px;
            height: 50px;
        }
    </style>
    
     <div id="flexContainer">
        <div class="component1">A</div>
        <div class="component2">B</div>
        <div class="component3">C</div>
    </div>