align-self
align-self는 align-items와 비슷하지만, align-items는 모든 item에 해당되고, align-self는 하나의 box에만 해당된다.
- align-content는 cross axis 방향으로 움직인다. 즉, cross axis가 row면 row 방향으로, column이면 column 방향으로 움직인다.
align-content
align-content는 justify-content와 비슷하지만, align-content는 line에 대한 property이다.
- flex-wrap으로 줄이 나뉘었을 때, align-content를 사용해 line의 간격을 변경할 수 있다.
- align-content는 cross axis 방향으로 움직인다. 즉, cross axis가 row면 row 방향으로, column이면 column 방향으로 움직인다.
order
order property는 html에서 box의 순서를 바꿀수 없을 때, 사용한다.
- box의 기본 order값은 order: 1; 이다.
- order의 숫자가 큰 box일수록 뒤에 위치한다.
- order 값은 음수, 양수 모두 사용할 수 있다.
ex)
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
.box2 {
order: 1;
}
원래 box 순서=> box1 / box2 / box3
order값을 준 후 바뀐 순서=> box1 / box3 / box2flex-wrap
flex box는 box의 width가 달라지더라도 모든 box를 같은 줄에 위치시켜고 하는데, 이때, box를 다른 줄에 위치시켜 box의 width를 유지하고 싶을 때, flex-wrap을 사용한다.
- flex-wrap의 기본값은 nowrap.
- wrap은 flex box에게 주어진 너비 안에서 box의 크기를 유지하라고 이야기한다. 즉, 주어진 width를 초과하게되면 box가 다른 줄에 위치하게 된다.
(이때, 주어진 너비는 box를 감싸고 있는 부모요소의 너비이다.)
flex-shrink
화면 크기가 줄어들때, 어떤 box가 다른 box보다 더 줄어들기를 원할 때 사용한다.
- flex-shrink의 기본값은 flex-shrink: 1; 이다.
- 유용한 property!
ex) box1 / box2 / box3 이 있을 때,
.box2 {
flex-shrink: 2;
}
를 주면, 화면이 줄어들 때, box1/3보다 box2가 2배 더 줄어든다.
(숫자가 커질수록 더 줄어든다.)flex-grow
flex-shrink와 같지만, 반대로 작용하는 property.
- flex-grow의 기본값은 flex-grow: 0; 이다.
- 화면에 여유 공간이 있으면 flex-grow가 주어진 box의 크기가 그만큼 커진다.
(= flex-grow는 공간이 남아있다면, box 주면의 공간을 가져간다.)
flex-basis
element가 찌그러지거나 늘어나기전에, element에게 처음 크기를 주는 것.
( + 처음 크기지만, 실제 크기는 아니다. 왜냐하면 이 크기는 flex-grow와 flex-shrink에 의해 바뀌기 때문이다.)
- flex-direction이 row일때,(main axis가 row일때,) flex-basissms width를 나타내지만, flex-direction이 column일때,(main axis가 column일때,) flex-basissms height를 나타낸다.
( 즉, flex-basis는 main axis 쪽 사이즈를 정의하는 것.)- 하지만, flex-basis는 width로 대체할 수 있기때문에 많이 사용되지 않는다.
