order
- flexbox의 children 요소의 순서를 변경하는 property이다. 앞으로 옮기고 싶다면 음수를 뒤로 옮기고 싶다면 양수를 넣어주면 된다.
child2 {
order: 2; //기존 위치에서 뒤로 2칸 이동한다.
}
flex-basis
- flexbox의 children 요소에 적용되는 property이며 flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다. flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다.
(잘 사용하지 않는다고 한다.)
flexboxfroggy (링크)
- flex 연습할 수 있는 곳!!
(재미 있고 하다보면 이해됩니다. 저는 24단계 까지 클리어 했습니다~~)
'CSS' 카테고리의 다른 글
| CSS 2-2 grid (gap, column-start, column-end, row-start, row-end) (0) | 2022.12.14 |
|---|---|
| CSS 02-1 grid (template-columns, template-rows, template-columns) (0) | 2022.12.13 |
| CSS 01-2 felx (felx-wrap, align-content, flex-shrink, flex-grow) (0) | 2022.11.23 |
| CSS 01-1 Flex 1 (justify-content, align-items, flex-direction) (0) | 2022.11.11 |
| css 활용하기 (0) | 2022.09.29 |