티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / CSS3 flex-4(align-self)

에스파니아 2020. 3. 28. 20:42
728x90
반응형
.
display 개별 아이템 정렬

부모 컨테이너의 속성이 display: flex 일 때, 부모 컨테이너 안에 아이템들의 요소들을 align-self 속성을 이용하여 개별적으로 정렬 할 수 있다. align-items 는 부모 컨테이너 안에 아이템들 전체를 정렬하는 속성이지만, align-self는 아이템 하나 하나를 정렬하는 속성으로, flex-start, center, flex-end 로 정렬할 수 있다.
.
align-self

/* 부모 컨테이너 */
.parentContainer{
	display: flex;
}

/* 자식 요소 */ 
.item1{
    align-self: flex-start;	//윗 정렬
}
.item2{
    align-self: flex-end;	//아래 정렬
 }
.item3{
    align-self: center;		//가운데 정렬
 }
.
Source

<!--  --><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex_Start</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
</head>
  
<style>
  .container{
    background: royalblue;
    border: 10px solid purple;
    height: 700px;
    display:flex;
  }
  
  .parentContainer{
    display: flex;
  }
  
  .item{
    width: 200px;
    border: 10px solid white;
    height: 300px;
    line-height: 300px;
    color: white;
    font-size: 100px;
  }
  
  .item1{
    align-self: flex-start;
  }
  
  .item2{
    align-self: flex-end;
  }
  
  .item3{
    align-self: center;
  }

  .item1 {background: pink;}
  .item2 {background: red;}
  .item3 {background: orange;}
</style>
  
<body>
  <div class="container">
    <div class="parentContainer">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </div>
</body>

</html>
왼쪽 부터 flex-start, flex-end, center

 

 

참고



728x90

'Bootstrap4' 카테고리의 다른 글

[Bootstrap] 레이아웃 / COLUMN-1  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-5(order)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-2(flex-grow)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex  (0) 2020.03.28
댓글
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/03   »
일 월 화 수 목 금 토
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
글 보관함