티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / CSS3 flex-2(flex-grow)

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

 

.
CSS3 flex-grow

컨테이너 폭에 꽉 차게 맞추어 일정 비율만큼 요소들의 크기를 정해주는 것.
Default : 0
각 아이템의 비율을 원래의 남는 부분에서 지정된 비율만큼을 계산해서 보태줌.
.
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{
    display: flex;
    border: 10px solid royalblue;
    height: 100vh;
  }
  
  .item{
    width: 300px;
    height: 200px;
    text-align: center;
    font-size: 100px;
  }
  
  .item2{
    flex-grow: 2;	//flex-grow 사용
  }
  .item3{
    flex-grow: 3; //flex-grow 사용
  }
  
  .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>
flex-grow 적용 전, 적용 후

 

 

참고





728x90

'Bootstrap4' 카테고리의 다른 글

[Bootstrap] 레이아웃 / CSS3 flex-4(align-self)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex  (0) 2020.03.28
[Bootstrap] 레이아웃 / container 클래스  (0) 2020.03.28
[Bootstrap] Starter Template  (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
글 보관함