티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items)

에스파니아 2020. 3. 28. 18:33
728x90
반응형

 

.
display 정렬

부모 컨테이너의 속성이 display: flex; 일 때, 자식 태그들을 justify-content, align-items 속성을 이용하여 정렬 할 수 있다. X 축 방향의 정렬은 justify-content 를 사용하고, Y 축 방향의 정렬은 align-items 를 사용한다. 
.
justify-content, align-items

.parentContainer{
    display: flex;
    
    justify-content: flex-start; // 왼쪽 정렬
    justify-content: flex-end; // 오른쪽 정렬
    justify-content: center; // 가운데 정렬
    justify-content: space-between; // 좌우 정렬
    justify-content: space-around; // 여백이 있는 좌우 정렬
}

 

.parentContainer {	
    display:flex;
    
    align-items: flex-start;	//위쪽 정렬
    align-items: flex-end;	//아래쪽 정렬
    align-items: stretch;	//상하로 쭉 늘려서 배치 (default)
    align-items: baseline;	//아이템 속의 컨텐츠의 베이스라인(아래쪽 라인)을 기준으로 정렬
}
.
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>
  body{
    margin: 0;
    color: white;
  }
  .container{

    border: 10px solid royalblue;
    height: 100vh;
    display:flex;
    
    /* X축 정렬 */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between */
    /* justify-content: space-around */ 
    
    /* Y축 정렬 */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: flex-end; */
    /* align-items: stretch; */
    /* align-items: baseline; */
  }
  
  .item{
    width: 200px;
    border: 10px solid olive;
    text-align: center;
    font-size: 100px;
  }
  
  /*base line 설정*/
  /* .item1{
    font-size: 2rem;
  }
  
  .item2{
    font-size: 10rem;
  }
  
  .item3{
    font-size: 5rem;
  } */
  

  .item1 {background: pink;}
  .item2 {background: red;}
  .item3 {background: orange;}
  .item4 {background: yellow;}
  .item5 {background: green;}
  .item6 {background: skyblue;}
  .item7 {background: blue;}
  .item8 {background: navy;}
  .item9 {background: purple;}
  .item10 {background: brown;}
  .item11 {background: grey;}
  .item12 {background: black;}
</style>
  
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <!-- <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item11">11</div>
        <div class="item item12">12</div> --> 
    </div>
    <!-- /container -->
</body>

</html>

 

 

참고



728x90

'Bootstrap4' 카테고리의 다른 글

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