[CSS] flex - 02

item에게 줄 수 있는 속성

order   item의 순서를 지정한다.
flex-grow   브라우저의 너비가 커질 때 item들의 너비를 비율로 지정
flex-shrink   브라우저의 너비가 줄어들 때 item들의 너비를 비율로 지정
flex-basis   지정한 퍼센테이지로 너비를 갖는다.
align-self   특정 item을 수직축 기준으로 별도 위치 지정

---

order

HTML

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

CSS (order 속성 x)

.item1 {
  background: #ef9a9a;
}
.item2 {
  background: #ffb3cc;
}
.item3 {
  background: #ce93d8;
}
.item4 {
  background: #b39ddb;
}

결과

order (order 속성 o)

.item1 {
  background: #ef9a9a;
  order: 4;
}
.item2 {
  background: #ffb3cc;
  order: 3;
}
.item3 {
  background: #ce93d8;
  order: 1;
}
.item4 {
  background: #b39ddb;
  order: 2;
}

결과

---

flex-grow

css

.item1 {
  background: #ef9a9a;
  flex-grow: 1;
}
.item2 {
  background: #ffb3cc;
  flex-grow: 2;
}
.item3 {
  background: #ce93d8;
  flex-grow: 3;
}
.item4 {
  background: #b39ddb;
  flex-grow: 4;
}

결과

너비가 작을땐 지정한 너비를 갖지만,

너비가 넓어지면 flex-grow로 지정한 비율을 갖게 된다.

---

flex-shrink

CSS

.item1 {
  background: #ef9a9a;
  flex-shrink: 1;
}
.item2 {
  background: #ffb3cc;
  flex-shrink: 2;
}
.item3 {
  background: #ce93d8;
  flex-shrink: 3;
}
.item4 {
  background: #b39ddb;
  flex-shrink: 4;
}

결과

브라우저의 너비가 그대로일 때는 원래의 너비를 갖지만,

브라우저의 너비가 줄어들면 지정한 flex-grow의 값만큼 더 줄어든다.

---

flex-basis

CSS

.item1 {
  background: #ef9a9a;
  flex-basis: 10%;
}
.item2 {
  background: #ffb3cc;
  flex-basis: 10%;
}
.item3 {
  background: #ce93d8;
  flex-basis: 10%;
}
.item4 {
  background: #b39ddb;
  flex-basis: 10%;
}

결과

지정한 너비와 브라우저의 크기와 상관없이 부모의 너비를 기준으로 지정한 퍼센테이지로 너비를 갖는다.

---

align-self

CSS

.item1 {
  background: #ef9a9a;
  align-self: flex-start;
}
.item2 {
  background: #ffb3cc;
  align-self: center;
}
.item3 {
  background: #ce93d8;
  align-self: flex-end;
}
.item4 {
  background: #b39ddb;
  align-self: stretch;
}

결과

align-self 속성값
auto   부모 align-items 속성을 상속받음
stretch   교차축 기준으로 부모에 맞게 늘어남
center   교차축 기준으로 부모 중심에 위치
flex-start   교차축 기준으로 부모 앞단 부분에 위치
flex-end   교차축 기준으로 부모 뒷단 부분에 위치
등등