Align-self & order

Seventh study list.

• align-self와 order

전 시간은 Flex-direction의 Column(세로)과 Row(가로)에 대한 개념에 대해서 공부하였습니다. 이번 시간은 algin-self와 order에 대한 개념을 정리하였습니다.

• 1. align-self
• 2. order

1. align-self

align-self는 오직 item에서만 적용이 가능하며, Cross axis 방향으로만 수정이 가능합니다.

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

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

이해를 돕기 위해 item명을 [child]로 표현하였습니다. 위의 내용처럼 child를 수정할 때에는 (item명):nth-child(n)을 지정한 후에 설정이 가능해집니다.

그림1

2. order

order는 align-self와 마찬가지로 item(child)만 설정이 가능하며, HTML에서 바꿀 수 없는 것이 있을 때 child를 지정하여 설정 가능합니다.

.child:nth-child(2) {
    order: 1;
}

2번째 child를 설정하여 order:1로 설정을 하게 되면 2번째 child가 3번째로 이동을 하게 되고, child3번은 2번째 자리로 위치가 바뀝니다.

child2가 3번째로 위치가 바뀌고, child3은 두번째로 위치가 바뀌는 것은 child2의 order를 1로 설정되어 있고, child1, child3는 order가 0으로 되어 있기 때문에 위와 같은 설정이 가능합니다.

.child:nth-child(1) {
    order: 2;
}

.child:nth-child(2) {
    order: 3;

2번째 예로child1은 order2, child2의 order를 3로 설정되어 있고, child3는 order가 0으로 되어 있기 때문에 위와 같은 설정이 가능합니다. 또한 이러한 상태에서flex-direction의 column과 align-silf에서 center를 설정하여 위치도 변경하여 꾸미는 것이 가능하니 디자인에 있어서 멋지게 꾸밀 수 있습니다.

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

.child:nth-child(1) {
    order: 2;
    align-self: center;
}