[CSS] Flex - Items 속성

 

Flex Items

 

속성	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shiringk, flex-basis 의 단축 속성
flex-grow	증가 너비 비율
flex-shirink	감소 너비 비율
flex-basis	(공간 배분 전)기본 너비
algin-self	교차 축에서 Item의 정렬 방법

 

 

order : item의 순서를 숫자 순으로 지정(음수 허용, 기본값 0)

 

flex-grow : Item의 증가너비를 숫자-비율로 설정(기본값 0)

ex) 1:2:3 => 100px, 200px, 100px

 

*item이 가변너비가 아니거나, 0일경우 효과 없음

*요소의 고정너비가 적용되어있는경우에는 완벽한 비율로 설정되지는 않음

 

 

예제( 하나는 고정하고 다른 하나는 유연하게 늘어나는데에 유용)

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
</div>

.container{
  border: 4px solid;
  display: flex;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}
.item1{
  flex-grow:1;
}

 

 

 

flex-shirink : Container의 너비가 감소할 때 Item이 감소하는 너비의 비율을 숫자로 설정(기본값0) 

숫자가 클수록 많이 감소

*item이 가변너비가 아니거나, 0일경우 효과 없음

*요소의 고정너비가 적용되어있는경우에는 요소의 너비에 영향을 받음(고정너비*flex-shirink의 비율로 감소)

 

 

flex-basis : item의 (공간 배분 전) 기본 너비를 설정. (기본값 auto-가변 item과 같은 너비)

기본값일 경우 flex-grow/shirink로 너비 조절할 때 고정너비를 제외한 너비로 비율 설정하지만,

단위 값(px 등)으로 설정할 경우 width, height 속성으로 Item의 너비를 설정할 수 없고

flex-basis값을 제외한 너비로 비율을 설정

 

 

flex : item 너비(증가,감소,기본)를 설정하는 단축속성

 

속성	의미	기본값
flex-grow	증가 너비 비율	0
flex-shirink	감소 너비 비율	1
flex-basis	(공간 배분 전)기본 너비	atuo

주의 *단축속성에서의 felx-basis의 기본값은 0이다

 

 

사용법

flex: 증가너비, 감소너비 기본너비;

 

 

algin-self : 교차 축에서 개별 item의 정렬방법을 설정

align-item은 Container의 모든 items에 부여하는 속성이지 개별 item에 부여하는 속성이 아니다

일부 item만 정렬 방법 변경할 경우 algin-self 사용!

 

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차 축을 (가득)채우기 위해 item을 늘림
flex-start	item을 각 줄의 시작점으로 정렬
flex-end	item을 각 줄의 끝점으로 정렬
center	item을 가운데 정렬
baseline	item을 문자 기준선에 정렬

 

예제

<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>

.container{
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}
.container .item2{
  align-self: center;
}
.container .item4{
  align-self: flex-start;
}
.container .item7{
  align-self: stretch;
  height: auto;
}