Post
기본 설정
HTML
<div class="block_align">
<div class="red_block">왼쪽 빨간 블록</div>
<div class="yel_block">중앙 노란 블록</div>
<div class="blue_block">오른쪽 파란 블록</div>
</div>
CSS
.block_align{
display: flex;
color: black;
}
.block_align .red_block{
background-color: red;
width: 200px;
}
.block_align .yel_block{
background-color: yellow;
width: 200px;
}
.block_align .blue_block{
background-color: blue;
width: 200px;
}
ON BROWSER
Flex Grow를 각각 1씩
HTML
<div class="block_align">
<div class="red_block">왼쪽 빨간 블록</div>
<div class="yel_block">중앙 노란 블록</div>
<div class="blue_block">오른쪽 파란 블록</div>
</div>
CSS
.block_align{
display: flex;
color: black;
}
.block_align .red_block{
background-color: red;
width: 200px;
flex-grow: 1;
}
.block_align .yel_block{
background-color: yellow;
width: 200px;
flex-grow: 1;
}
.block_align .blue_block{
background-color: blue;
width: 200px;
flex-grow: 1;
}
ON BROWSER
Flex Grow를 우측 파란색 블록에만 2
HTML
<div class="block_align">
<div class="red_block">왼쪽 빨간 블록</div>
<div class="yel_block">중앙 노란 블록</div>
<div class="blue_block">오른쪽 파란 블록</div>
</div>
CSS
.block_align{
display: flex;
color: black;
}
.block_align .red_block{
background-color: red;
width: 200px;
}
.block_align .yel_block{
background-color: yellow;
width: 200px;
}
.block_align .blue_block{
background-color: blue;
width: 200px;
flex-grow: 2;
}
ON BROWSER
Flex Grow를 우측 파란색과 좌측 빨간색에 각각 3씩
HTML
<div class="block_align">
<div class="red_block">왼쪽 빨간 블록</div>
<div class="yel_block">중앙 노란 블록</div>
<div class="blue_block">오른쪽 파란 블록</div>
</div>
CSS
.block_align{
display: flex;
color: black;
}
.block_align .red_block{
background-color: red;
width: 200px;
flex-grow: 3;
}
.block_align .yel_block{
background-color: yellow;
width: 200px;
}
.block_align .blue_block{
background-color: blue;
width: 200px;
flex-grow: 3;
}
ON BROWSER
'CSS & SCSS related' 카테고리의 다른 글
| SCSS Translate (0) | 2023.01.20 |
|---|---|
| SCSS Customized Scroll Bar (0) | 2023.01.20 |
| CSS Background image (0) | 2023.01.19 |
| CSS Custom Variables (0) | 2023.01.19 |
| CSS before & after Basic (0) | 2023.01.19 |