SMALL
사진 설명을 입력하세요.
flex-item에 설정하는 속성(아이템 크기에 영향을 줌)
// flex-grow : 성장
: 아이템전체크기보다 컨테이너가 클때
: 아이템의크기를 부모컨테이너의 크기에 맞춤
flex-grow:1 --> 아이템의 개수가 N개일때
1/n, 1/n, 1/n, 1/n
// flex-shrink : 수축
: 컨테이너가 아이템의 전체크기보다 작을때
: 아이템의크기를 강제로 수축시킴(컨테이너에 맞게)
// flex-basis : 크기 (flex-direciton의 영향을 받음)
auto: 컨텐츠의 크기만큼만 적용
: flex 아이템에만 사용하는 크기값
display:flex설정시
flex-grow:0
flex-shrink:1
flex-basis:auto
flex:none : 사용자가 flex item의 크기를 설정시 효과적인 옵션
grow:0 성장없음
shink:0 수축없음
basis:auto 컨텐츠크기만큼
<body>
<h2>기본값 flex-grow:0, flex-shink:1, flex-basis:auto</h2>
<div class="box box1">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="spacer"></div>
<h2>flex-grow:1</h2>
<div class="box box2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="spacer"></div>
<h2>flex-grow 홀수:1 짝수:2</h2>
<div class="box box3">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="spacer"></div>
<h2>flex-grow:0, flex-shrink:1</h2>
<div class="box box4">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="spacer"></div>
<h2>flex:none : flex-grow:0, flex-shrink:0, flex-basis:auto</h2>
<div class="box box5">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="spacer"></div>
</body>
<style>
* {
margin: 0;
padding:0;
}
.spacer {
height: 50px;
}
body {
padding: 50px;
}
.box {
border: 5px solid #fc0;
padding:1rem;
display: flex;
}
.box .item {
padding: 0.5rem;
}
.box .item:nth-child(even) {
background-color: aqua;
}
.box .item:nth-child(odd) {
background-color: greenyellow
}
.box2 .item {
flex-grow: 1;
/*
현재 아이템 개수 = 4개
부모의 width를 4등분 => 크기를 아이템이 서로 배분
*/
}
.box3 .item:nth-child(even) {
flex-grow: 2;
}
.box3 .item:nth-child(odd) {
flex-grow: 1;
}
/*
flex-grow숫자 합이 6 - 6/n
*/
.box4 {
width: 100px;
}
.box4 .item {
flex-grow: 0; /* 성장없음 */
flex-shrink: 1;
flex-basis: 200px;
}
.box5 .item {
flex:none;
width: 25%;
box-sizing: border-box;
}
</style>
LIST
'프론트엔드 개발자 > CSS' 카테고리의 다른 글
| GRID로 레이아웃 만들기 , GRID 완벽 분석하기 grid를 사용해보자 (2) (0) | 2023.04.18 |
|---|---|
| GRID 완벽 분석하기 grid를 사용해보자 (1) (0) | 2023.04.18 |
| CSS 애니메이션 효과 _ 카드박스 효과내기(2) (0) | 2023.04.07 |
| CSS 애니메이션 효과 _ 카드박스 효과내기(1) (0) | 2023.04.07 |
| CSS _ 애니메이션 다양한 효과넣기(4) (0) | 2023.04.05 |
댓글