Flexbox 기본 개념 정리
CSS flexbox는 container 과 items 를 정렬시켜주는 기능을 한다.
container을 정렬시켜주는 코드들에는
Justify-content
align-items
align-content
flex-direction
flex-wrap
flex-flow
등이 있고
items를 정렬시켜주는 코드들에는
order
flex-shrink
flex-grow
flex
align-self
등이 있다.
flexbox에서는 행과 열의 개념이 중요한데 flex-direction 에서 이를 정의해줄 수 있다. column과 row 를 통해서이다. 기본값은 row이며 세로로 정렬시켜주고 싶다면 column 을 이용하고 가로로 정렬시켜주고 싶다면 row 를 이용하면 된다. 여기서 row의 경우 왼쪽->오른쪽 그리고 column 의 경우 위쪽->아래쪽 으로 정렬되는데 이 방향을 바꾸고 싶다면 뒤에 -reverse 를 붙혀주면 된다.
'row-reverse'나 'column-reverse'처럼 말이다.
또한 flex-wrap 이라는 것이 있는데 이는 만약 보여지는 윈도우 창 내에 안의 내용물이 가득 찬다면 자동으로 줄을 바꿔주는 것을 말한다. 기본 값은 unwrap 이며 이 경우에는 자동으로 줄바꿈을 해주지 않는다.만약 순서를 바꾼 채로 줄바꿈을 해주고 싶다면 wrap-reverse를 사용해주면 된다
이러한 flex-direction과 flex-wrap 을 한꺼번에 한줄에 써줄 수 있는데 이를 위해서는 flex-flow를 사용하면 된다. 예를 들면 flex-flow: row wrap; 처럼 말이다.
flexbox 개념에는 main 축과 반대축의 개념이 있다.
줄이 왼쪽에서 오른쪽으로 정렬되어 있다면 가로 줄이 main 축이 되고 세로 줄이 반대 축이 된다. 이러한 경우 가로줄을 정렬시켜주고 싶다면 justify-content 를 이용하면 되고 그 반대축은 align-content 를 이용해주면 된다.반대의 경우에는 세로 줄이 main 축이 되고 가로 줄이 반대축이 된다. 이러한 경우에는 세로줄의 정렬을 위해서 justify-content, 가로 줄은 align-items과 content 를 이용하면 된다. 즉, 모든 메인 축 정렬은 justify-content, 반대 축은 align-items나 content를 이용하면 된다.
여기서 align-items과 content의 차이는 content 는 item이 두 줄 이상일때에 효과가 드러난다. 이는 내용물들을 정렬해주는 개념이기 때문이다. flexbox froggy에 따르면 align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다.
items를 정렬시켜 주는 order의 경우에는 순서를 뒤바꿔줄 수 있으며 값으로는 -1,0,1.. 등 쓸 수 있다. 음수를 쓰게 되면 무엇이던간에 맨 앞의 순서로 데려온다. flex-grow과 shrink는 해당 item이 window 창이 늘어나고 줄어듦에 따라 어떻게 늘어나고 줄어드는지를 결정해주는 것이다. 이 두가지를 flex-flow 처럼 한번에 한줄로 쓸 수 있는데 flex-basis를 사용해주면 된다.
align-self는 모든 요소를 정렬하는 align-items과 달리 소속되어 소속된 하나의 요소를 지정해서 움직일 수 있다.
Q1.
#pond{
display:flex;}
답: justify-content:flex-end;
justify-content의 속성에는 flex-start(기본값), flex-end(반대에서 시작), center(중간 정렬),space-between( 아이템들 사이에 공간두기), space-around(아이템 주위에 공간 두기)등이 있다.
Q2.
#pond{
display:flex;}
답:justify-content:center;
Q3.
#pond{
display:flex;}
답:justify-content:space-around;
space-between과 space-evenly, space-around 의 차이점은 between 은 맨 앞과 맨 끝에는 공간을 두지 않고 중간의 item 들 사이에 동일한 간격을 넣어준다. space-evenly는 맨 앞과 맨 뒤 그리고 중간까지 모두 동일한 간격을 넣어준다. 마지막으로 space-around는 각 item들 주변에 동일한 간격을 띄워주는 것인데 이로 인해 맨 앞과 맨 뒤에 비해 중간의 item들은 자신의 앞과 뒤의 item 들의 간격에도 영향을 받아 맨 앞과 맨 뒤에 비해 간격이 넓다.
Q4.
#pond{
display:flex;}
답:justify-content:space-between;
Q5.
#pond{
display:flex;}
답:align-content:flex-end;
이 그림은 가로로 정렬되어 있으므로 메인 축은 가로줄이다. 그렇기 때문에 해당 개구리를 아래쪽으로 위치해주고 싶다면 반대축을 이용해야한다. 또한 개구리들이 두 줄 이상이 아니고 모든 요소를 정렬해 주어야하기 떄문에 align-items 를 사용해야한다. 반대축에서 위가 아닌 아래쪽 즉 반대로 시작하고 있기 때문에 이는 flex-end 를 적어주어야한다.
Q6.
#pond{
display:flex;}
답:justify-content:center;
align-items:center;
Q7.
#pond{
display:flex;}
답:justify-content:space-around;
align-items:flex-end;
연꽃잎을 보면 맨 앞과 맨 뒤에 비해 사이의 거리가 좀 더 떨어져 있는 것을 알 수 있다. 이로 인해 evenly과 between이 아닌 space-around인 것을 알 수 있다. 그리고 또한 메인 축이 가로 줄이며 세로줄은 반대축이다. 개구리들을 밑으로 정렬시켜주고 싶다면 반대축을 이용해야한다.
Q8.
#pond{
display:flex;}
답:flex-direction:row-reverse;
이는 justify-content:flex-end; 라고 생각할 수도 있지만 잘보면 연꽃잎의 순서가 반대이다. 빨간색과 초록색 개구리의 색과 연꽃잎의 순서가 반대이다. 이렇게 순서를 뒤바꾸어줄 수 있는 정렬방법은 flex-direction에서 row-reverse와 column-reverse를 이용해주면 된다. 여기서 row-reverse와 column-reverse 이 둘과 flex-end의 차이점을 알아낼 수 있다. flex-end의 경우 평소 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 가던 것을 오른쪽에서 왼쪽, 아래쪽에서 위쪽으로 정렬시키지만 순서가 반대로 바뀌지 않는다. 가로 정렬이라면 그대로 1 2 3 4 ... 식으로 간다. 하지만 row와 column의 reverse의 경우 순서마저 반대로 간다. 10 9 8 7 식으로 말이다.
따라서 이 문제는 flex-direction의 reverse를 이용하면 순서를 바꾸고 오른쪽 정렬을 시킬 수 있게 된다.
Q9.
#pond{
display:flex;}
답:flex-direction:column;
Q10.
#pond{
display:flex;}
답:flex-direction:row-reverse;
justify-content:flex-end;
이 문제는 빨간색 개구리와 초록색 개구리의 순서를 바꾸어야 하며 기본값처럼 왼쪽에서 오른쪽으로 정렬되어야한다. 만약 순서를 바꾸어 주기 위해 row-reverse를 쓰게 되면 이 개구리들은 오른쪽 상단에 위치하게 된다. 이를 왼쪽으로 정렬시켜주고 싶다면 justify-content를 이용하면 된다. 여전히 메인축에서 움직이기 때문이다. 하지만 현 상태에서는 오른쪽이 start지점이 된다. 따라서 왼쪽으로 정렬해주고 싶다면 flex-end 를 사용해주어야한다.
Q11.
#pond{
display:flex;}
답:flex-direction:column;
justify-content:flex-end;
이 문제는 10번 문제와 유사하다. 먼저 개구리들이 가로로 정렬되어 있는걸 세로로 바꾸어 주어야한다. 따라서 메인축 또한 가로축에서 세로축으로 변경된다. 그렇기 때문에 align 이 아닌 justify를 이용하여 아래쪽에 정렬되어 있기 때문에 flex-end를 적어주면 된다.
Q12.
#pond{
display:flex;}
답:flex-direction:column-reverse;
justify-content:space-between;
일단 가로로 정렬되어있는 개구리들을 세로로 정렬시켜주어야 하므로 column 을 사용해야한다. 그런데 잘 보면 연꽃잎과 개구리들 간의 색깔이 반대이다. 그렇기 때문에 column-reverse를 사용해주어야한다. column 으로 지정했기 때문에 자동적으로 메인 축은 세로 축이 되며 위 아래의 정렬은 justify-content를 이용해주면 된다. 연꽃잎들을 잘 보게 되면 위 아래 에는 간격이 있으니만 못하는 작은 간격임에 비해 연꽃잎들간 사이는 비교적 넓다. 따라서space-between 을 넣어주면 된다.
Q13
.
#pond{
display:flex;}
답:flex-direction:row-reverse;
justify-content:center;
align-items:flex-end;
먼저 해주어야 할 것은 가로 정렬을 해주어야 하는지 세로 정렬을 해주어야하는지다. 이 그림을 보면 그대로 가로 정렬이나 연꽃잎과 개구리의 순서가 반대이다. 그렇기 때문에 row-reverse를 사용해주어야한다. 따라서 오른쪽으로 그리고 반대순서로 정렬된 개구리들을 이제 중앙에 위치시키고 아래로 내려야한다. 먼저 중앙에 위치시켜주기 위해서는 가로축 즉 현 메인축에서 움직이면 된다. 따라서 Justify-content:center 을 입력하면 중앙에 모이게 된다.
이제 이 개구리들을 아래로 내리기 위해서는 세로 축 즉 반대 축을 이용해야한다. 따라서 align-items를 사용해주어야 한다. 세로축에서는 기본값이 위에서 아래인데 해당 그림에서는 아래에 위치해 있어야 하므로 flex-end를 입력해주면 된다.
Q14.
#pond{
display:flex;.yellow{
}
}
답:order:2;
노란색 개구리와 빨간색 개구리의 순서가 바뀌어야한다. 두번째와 세번째의 순서가 뒤바뀌어야하므로 reverse를 사용할 수 없다. 아이템이 3개일 경우 reverse를 사용하게 되면 처음과 끝이 바뀌기 때문이다. 따라서 이 경우에는 item을 정렬시켜주는 order를 사용해주어야한다. 두 번째와 세번째의 위치를 바꿔야하기 때문에 yellow 안의 order을 2로 적어주면된다.
Q15.
#pond{
display:flex;.red{
}
}
답:order:-1;
앞서 얘기했듯이 해당 아이템을 정해진 순서 상관없이 맨 앞으로 가져오고 싶을 경우에는 -1을 사용해주면 된다.
Q16.
#pond{
display:flex;.yellow{
}
}
답:align-self:flex-end;
align-self 는 소속되어 있는 태그만 정렬시켜준다. 그림을 보면 노란색의 개구리만 밑으로 정렬되어있기 때문에 flex-end를 적어주면 된다.
Q17.
#pond{
display:flex;
align-items:flex-start;.yellow{
}
답:order:1;
align-self:flex-end;
그림을 보면 초록색과 노란색을 각각 묶어줘야 하며 순서를 바꾸어 주어야한다. 또한 이 질문에 빈칸이 yellow에 소속되어 있기 때문에 yellow 만 옮길 수 있는 방향으로 생각해보면 order을 통해 같은 색깔들로 묶어줄 수 있어야한다. order=1; 을 통해 초록색을 앞으로 보낸 뒤 노란색 개구리를 아래로 정렬을 해주어야하는데 지금 yellow에 소속되어 있기 때문에 이들만 아래로 정렬을 할 수 있는 방법은 align-self를 이용하는 것이다.
Q18.
#pond{
display:flex;}
답:flex-wrap:wrap;
그림을 보면 연꽃잎이 개구리와 같은 순서로 줄이 아래로 내려간 형태라는 것을 알 수 있다. 이처럼 줄바꿈을 해주는 태그는 flex-wrap 이다. 기본값이 unwrap 즉, 줄바꿈이 안되는 상태이기 때문에 wrap 으로 바꿔주면 된다.
Q19.
#pond{
display:flex;}
답:flex-direction:column;
flex-wrap:wrap;
일단 가로로 정렬되어 있는 개구리들을 세로로 정렬시켜주어야 하기 때문에 column을 적어주어야한다. 또한 자동 줄바꿈을 위해 wrap 을 이용하면 된다.
Q20.
#pond{
display:flex;}
답:flex-flow: column wrap;
flex-flow를 사용하게되면 flex-direction과 flex wrap을 한줄에 한꺼번에 쓸 수 있게 된다.
Q21.
#pond{
display:flex;
flex-wrap:wrap;}
답:align-content:flex-start;
아이템들이 2줄 이상이며 이 줄들간 반대축 정렬을 하고 싶을때에는 align-content를 사용해주면 된다.
Q22.
#pond{
display:flex;
flex-wrap:wrap;}
답:align-content:flex-end;
Q23.
#pond{
display:flex;
flex-wrap:wrap;}
답:flex-direction:column-reverse;
align-content:center;
먼저 세로로 정렬시켜야하므로 column 그리고 column을 한 상태에서 제일 위에 올라와있는 빨간색 개구리를 맨 밑으로 보내야하기때문에 reverse를 걸어주어야한다. 그 다음 중앙으로 이 아이템 줄들을 정렬해야하므로 align-content를 이용하여 중앙 정렬하면 된다.
Q24.
#pond{
display:flex;}
답:flex-direction:column-reverse;
flex-wrap: wrap-reverse;
justify-content:center;
align-content:space-between;
먼저 세로정렬을 만들어주기 위해 column을 사용해준다. 그런 다음 연꽃잎을 보면 빨간색연꽃잎이 맨 아래에 위치해 있다. 따라서 column-reverse를 해줘야한다. 또한 줄바꿈이 필요하기 때문에 wrap 을 해줘야한다. 하지만 여기서 wrap을 하게 되면 노란색 개구리들이 줄바꿈을 통해 오른쪽에 위치하게 된다. 연꽃잎이 바라는것은 노란색 개구리가 왼쪽에 위치하는 것이기 때문에 wrap-reverse 를 통해 방향을 바꾸어주어야한다.그렇게 원하는 방향으로 맞춘다음 노란색 개구리를 중앙에 보내기 위해서는 메인 축이 된 세로 축 방향을 이용해야한다. 따라서 justify-content를 사용하여 중앙 정렬을 시킨다음 개구리들 간의 사이를 띄어주기 위해 space-between을 해주면 된다.
