[CSS] ch1.4 ~ ch1.7 : Flexbox2

ch1.4 : align-self and order

• align-items과 비슷한 일을 한다.(cross axis)
  다만, 한 box에만 해당한다.

.father {
    display: flex;
    flex-direction: row; /*default: row*/
    /*Main Axis*/
    justify-content: space-around;
    height: 100vh;
}

.child {
    width: 200px;
    height: 200px;
    background: peru;
    color: white;
}

.child:nth-child(2) {
    align-self: center;
}
.child:nth-child(3) {
    align-self: flex-end;
}

위와 같이 코드를 쓰면 아래와 같은 결과가 나온다.

• child에게 줄 수 있는 또 다른 property로는 order가 있다.
  box에게 순서를 변경하라고 할 수 있다.
  이게 이상해 보이지만, HTML을 변경할 수 없을 때 유용하다.

• 기본적으로 box의 order는 모두 0 이다.

==> child에게 줄 수 있는 property는 align-self와 order이다.

ch1.5 : wrap, nowrap, reverse, align-content

• flexbox는 item들이 모두 같은 줄에 있도록 유지한다.
  (그래서 item의 개수가 많아지면 item의 width,height가 바뀌는 경우가 발생함)
• flex-wrap:nowrap이 default이다.
  이는 무슨 짓을 하더라도, flexbox안에 element들이 같은 줄에 있어야 한다는 것이다.
• flex-wrap:wrap으로 바꾸면, child의 크기를 유지하라고 하는 것이다.

.father {
    display: flex;
    flex-direction: row; /*default: row*/
    /*Main Axis*/
    justify-content: space-around;
    height: 100vh;
    flex-wrap: wrap;
}

• flex-direction으로 row-reverse와 column-reverse를 줄 수도 있다.
• 만약, flex-direction:row인 상황에서 reverse를 하고 싶다면 flex-wrap:wrap-reverse를 하는 방법도 있다.
  
• 위의 사진에서 위,아래 box들 간의 공백은 align-content로 수정할 수 있다.
  justify-content와 비슷해 보이지만 line(cross axis)을 위한 것이다.
• align-content에는 center, space-between, space-around등이 있으며, space-around가 default이다.
• align-content: flex-start를 하면 공백이 사라진다.

ch1.6 : flex-grow, flex-shrink

• flex-grow, flex-shrink는 child에 줄 수 있는 property이다. (반응형 screen을 만들 때 유용)
• flex-shrink는 기본적으로 element의 행동을 정의한다. flexbox가 쥐어짜질 때.
  flex-shrink:2는 다른 child에 비히 2배로 줄어든다. (기본값:1)
• flex-grow는 flex-shrink와 같지만 반대로 작용한다. (얼마나 많은 box가 커질까?)
  flex-grow:1은 남아있는 빈 공간을 가져오거나, 가질 수 있는 만큼을 커지게 된다. (기본값:0)
  아래와 같이 코드를 짜면, 남아있는 공간의 2/3는 두번째 child가, 1/3은 첫번째 child가 가져간다.

.child:nth-child(2) {
    background-color: black;
    flex-grow: 2;
}

.child:nth-child(3) {
    flex-grow: 1;
}

ch1.7 : flex-basis

• flex-basis는 child에 적용되는 property로, element에게 처음 크기를 주는 것이다.
  (모든 것이 찌그러지거나 늘어나기 전에)
• flex-basis는 width와 비슷하나 오직 width만 있는 것은 아니다.
  (width와 유사 : flex-direction이 row일때. column이면 height와 유사할 것)
• 잘 쓰이지 않는다. width가 있기 때문에. (flex-basis는 변하지 않으념 width랑 같으니까)