All Day Tired

flex 이용해서 div너비 유지(about. flex-basis, flex-grow) 본문

Front/html／css

flex 이용해서 div너비 유지(about. flex-basis, flex-grow)

yu.dev 2022. 2. 1. 00:44

안녕하세요! 두 번째 포스팅입니다!

요즘 JAVA 공부하다 보니 포스팅할 시간이 너무 없었는데 연휴 덕에 겨우 올려봅니다.

 

제가 html/css 배우면서 유용하겠다 싶었던 내용 중 하나인 flex를 이용해서 여러 div 중 특정 div너비만 다른 div에 비해 일정 비율만큼 넓게 너비를 유지하는데 사용하는 css 내용인데요.

말로 쓰니까 뭔가 이해하기 힘든 느낌이라서 직접 캡쳐한 사진을 보면

이런 식으로 브라우저 크기를 조정해서 3과 5 부분의 너비 비율이 일정해지도록 할 때 유용하게 사용하는 방법입니다!

3 부분은 다른 div보다 2배 넓도록 5 부분은 다른 div보다 4배 넓도록 했습니다!

 

그럼 먼저 html 코드부터 보겠습니다!

<body>
    <div id="container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

코드는 아주 간단하게 했습니다. 그럼 css코드도 보겠습니다.

body{
    margin: 20px;
}
#container1{
    width: 70%;
    margin-bottom: 20px;
    display: flex;
}
#container1 div{
    background-color: #FFE2E2;
    border: 1px solid gray;
    font-size: 18px;
    text-align: center;
    flex-basis: 0;
    flex-grow: 1;
}
#container1 div:nth-child(3){
    background-color: #FFC7C7;
    flex-grow: 2;
}
#container1 div:nth-child(5){
    background-color: #FFC7C7;
    flex-grow: 4;
}

div들이 좀 잘 보일 수 있도록 body에 margin을 20px만 주었습니다. 단지 div가 더 잘 보이도록 준거라서 딱히 의미는 없습니다.

css코드에서 중요한 부분이라고 하면 div에 flex-basis: 0;과 flex-grow:1;을 주고 너비가 더 넓었으면 하는 div에 flex-grow의 값을 다르게 주었다는 것입니다.

 

flex-basis:0;을 준 이유는 부모요소인 container1이 자식 요소(div)들의 넓이를 0으로 보도록 하기 위해서입니다.

자식 요소에는 content가 있지만 부모 요소인 container1는 다 무시하고 자식 요소 너비를 0으로 봐서 자기 너비(=부모 요소인 container1 너비)만큼을 자식 요소에 grow 지정 값만큼을 자기 전체 너비(=부모 요소인 container1 너비)를 자식 요소들에게 줄 수 있습니다.
따라서 flex-basis를 0으로, flex-grow를 자식요소들 모두한테 일정한 비율로 주고 특정 자식 요소에만 넓히고 싶은 만큼 숫자를 주면 부모 요소인 container1 전체 너비를 자식 요소들에게 비율에 맞게 주니까 너비 비율이 부모 요소인 container1의 너비만큼 나눠가지게 되는 것입니다.

 

설명이 제가 설명을 좀 난잡하고 이해하기 어렵게 적은 느낌입니다...

그냥 단순하게 말하자면 자식요소 전체에 flex-basis:0; flex-grow:1;을 주고 특정 자식 요소에 flex-grow를 다른 값을 주면 부모 요소의 너비를 자식 요소들이 가진 flex-grow값의 비율만큼 가져간다라고 생각하면 될 거 같아요.

또한 flex를 쓴 것이므로 브라우저 크기를 조정해도 저 비율은 그대로 적용됩니다.

 

오늘 포스팅은 여기서 줄이겠습니다!

'Front > html／css' 카테고리의 다른 글

text-overflow ellipsis 여러줄 ... 만들기  (0) 2022.02.01
Web page Clone Coding 01(about. 마진상쇄)  (0) 2022.01.24
'Front/html／css' Related Articles more
Comments