💢Flexbox란?
- css3의 최신 레이아웃 모델으로 'display' 속성을 사용함
- float를 대체하여 더 효율적으로 사용됨.
- 가로 세로로 아이템들을 정렬하고 아이템들의 순서나 비율 등을 쉽게 적용.
💢Flex란?
- 내부 아이템 배치를 쉽게 도와주는 정렬을 위한 도구.
- flex를 적용하기 위해서는 부모 요소의 css에서 시작해야 한다.
- < body> 태그 안에 먼저 아래의 코드를 넣는다
ex. <div class="container"> <div class="home">Home</div> <div class="search">Search</div> <div class="logout">Logout</div> </div>
- 그 후 < style> 태그의 부모 태그인 container 클래스 안에 display 속성을 적용시킨다.
.container { display:flex; }
💢Flex 속성
- flex-direction : flex-container 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정
=> row | row-reverse | column | column-reverse;- flex-wrap : flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성. 만일 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 설정할 수 있습니다.
=> nowrap(default): 모든 아이템들은 한줄로
wrap: 아이템들은 위에서 아래로 여러줄로 나열
wrap=reverse: 아래에서 위로 여러줄로 나열- justify-content : 아이템들의 가로 정렬 방법
=> flex-start, flex-end, space-around(요소들 주위에 동일한 간격을 둠), space-between 요소들 사이에 동일한 간격을 둠), center, space-evenly;
*align-content : 아이템들의 세로 정렬 방법 // align-self: 각자 움직임!
=> flex-start, flex-end, space-around(요소들 주위에 동일한 간격을 둠), space-between 요소들 사이에 동일한 간격을 둠), center, stretch;
Flex-direction의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.
(column-reverse 또는 row-reverse를 사용하면 요소들의 flex-start와 flex-end의 순서도 뒤바뀝니다.)
/*
Transform : 요소에 회전, 크기조절, 기울이기, 이동효과
transform : rotate(90deg);, rotate(3turn)
// (90도 회전, 3번 회전)
transform: translate(100px, 100px); ()만큼 이동
여러 속성을 한번에 함께 사용가능!
Transition : 효과의 지속시간, 효과를 추가하려는 css속성
transition: 3s -> 3초
*/
<관련 게임 참조!>
http://flexboxfroggy.com/#ko
Tina🌙