[html][css] flex items속성/order/ flex/flex-grow/flex-shrink/flex-basis/align-self

order: flex item의 순서를 지정

flex: flew-grow, flex-shrink, flex-basis의 단축속성

flex-grow: flex item의 증가 너비 비율을 설정

flex-shrink: flex item의 감소 너비 비율을 설정

flex-basis: flex item의 (공간 배분 전) 기본 너비 설정

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

---

order

item의 순서를 설정합니다.

item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.

음수가 허용된다.

html구조와 상관없이 순서를 변경할 수 있어서 유용하다.

기본값은 0

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

.container{
  border: 4px solid;
  display: flex;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed blue;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.item1{
  order:1;
}
.item2{
  order:1;
}

숫자를 부여했기 때문에 1과 2는 순서가 밀려 뒤로 가게 된다.

 

---

flex-grow

item의 증가 너비 비율을 설정한다.

숫자가 크면 더 많은 너비를 가진다.

item의 가변 너비가 아니거나 값이 0 이면 효과가 없다.

 

.item1{
  flex-grow:1;
}

css에서 이부분만 수정했다.

현재 item1에만 1을 주었으니 전체는 1이니까 item의 크기는 1분의 1이다.

전체 크기를 다 쓰겠다는 뜻인데 2와 3이 100px씩 가지고 있기 때문에 그것을 제외하고 전체 크기를 쓰겠다는 것이다.

---

 

flex-shrink

item이 감소하는 너비의 비율을 설정한다.

숫자가 크면 더 많은 너비가 감소한다

기본값은 1이다.

CSS Flex(Flexible Box) 완벽 가이드 | HEROPY

CSS Flex(Flexible Box) 완벽 가이드

---

flex-basis

item의 공간배분전 기본 너비를 설정한다.

auto일때는 여백의 너비의 비율이 맞아지지만

0일때는 전체 너비가 비율에 맞게 달라진다.

---

 

flex : 단축 속성

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

기본 값: 0 1 0; 

 

---

align-self

교차축에서 개별 item의 정렬 방법을 설정한다.

auto: container의 align-items 속성을 상속받음

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>

.container{
  border: 4px solid;
  display: flex;
  flex-wrap:wrap;
  height: 500px;
  align-items: center;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed blue;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.container .item1{
  align-self: flex-start;
}
.container.item2{
  
  align-self: flex-end;
}
.container .item4{
  align-self: stretch;
  height: auto;
}