여태까지 내가 정렬을 위해서 사용했던 것들은 position, float,table 이었다.

flex의 존재에 대해서는 알고있긴했지만 제대로 찾아보지도 않았고 제대로 사용하지도 못했으니 뭐..

(그리고 솔직히 내가 사용한다고 해도 다른사람들이 flex에 대해 모르니 다시 table로 재작성을 해버려서..;;

수정을 해봤자 의미가 없는 상황;;;;;)

이런저런 핑계로 flex에 대해 배우지도 못했는데 이번기회에 배우게 됨

근데.. 역시나 첨 배우다보니 ‘????????’ 가 또 떠다님. 정리가 안됨ㅎㅎㅎㅎㅎㅎㅎㅎ

새로운 속성들과 값들이 너무 많이 나타나서 어디에 어떤걸 써야하는지, 이 속성과 저 속성의 차이, 이 값과 저 값의 차이가 뭔지 정리가 안됨.

그래서 정리를 위해 작성중..

우선 가장 중요하고 기본전제로 알아두어야 할 개념은, 기준점을 잡는것이다.

모든 요소들은 사각형으로 영역을 잡으므로 이 사각형들을 어떻게 배열할것인지가 관건인데,

배열은 우선 둘째치고, 배열이되었을때 이 사각형들의 크기를 어떻게 먼저 잡는지가 중요!

border를 기준으로 잡을건지, 아니면 그 안에있는 내용물(item)들을 기준으로 잡을건지가 중요하다.

그래야 border가 커질지 아니면 item들이 커질지 결정할 수 있기 때문이다.

item들을 감싸고 있는 포장박스(container)의 크기는 고정을 할것인지 (= box-sizing : border-box;)

아니면 item들에 따라 포장박스(container)의 크기를 변동시킬것인지 (= box-sizing : content-box;)

를 먼저 정해주어야한다.

근데 대부분은 큰 틀을 잡고 그 안에다가 세부 박스들을 정렬하기 때문에 대부분은 포장박스의 크기를 정해놓고 시작한다.

(container안의 글자들이 많아진다고 글자를 담고있는 div태그의 width가 계속해서 늘어나면 내가 이미 잡아두었던 레이아웃이 틀어지게 되는거니까;; 그러니까 가장 큰 골격을 잡아두고 시작해야함)

container

컨테이너에 적용할 수 있는 속성들에는

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

등이 있다.

item

item들에 적용되는 속성들에는

• order
• flex-grow
• flex-shrink
• flex
• align-self

등이 있다

EXAMPLE

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
  <div class="item">3</div>
</div>

.container{
	background-color:beige;
	height: 100vh;
	/*만약 100vh로 적지 않고 100%로 적는다면 부모 태그의 height를 정해주어야 하기 떄문에 
  html,body태그의 height 를 100%로 적어주어야 함 */
}

.item{
	width:40px;
	height:40px;
}

여기서 가장 눈여겨봐야 할 것은 .container 인데, container안의 item들의 정렬을 .container 안에 어떻게 넣느냐에 따라 달라지기 떄문이다.

안에 아이템이 3개가 있고, 이 item들은 블록요소인 div태그를 사용했으므로 내용의 길이와는 상관없이 한 줄을 다 차지한다

(그래서 겉으로 보이기에는 줄바꿈이 있는것처럼 보임)

1. flex

.container 안에 display:flex 속성을 적어주면 ‘넌 이제부터 flexbox야’ 라고 선언하는것과 같다

적어주면 item이 왼쪽에서 오른쪽으로 정렬이 된다. 가로로 1,2,3 이렇게 정렬됨

2. flex-direction

• flex-direction : row => 왼쪽부터 차례대로 수평정렬 (메인축이 가로)
• flex-direction : row-reverse => 오른쪽부터 차례대로 수평정렬
• flex-direction : column => 위쪽부터 차례대로 수직정렬 (메인축이 세로)
• flex-direction : column-reverse => 아래쪽쪽부터 차례대로 수직정렬

3. flex-wrap

• flex-wrap : nowrap => 기본값은 nowrap. 화면이 아무리 작아져도 item들이 한줄에만 모여있음 (item 크기가 줄어듬)
• flex-wrap : wrap => 화면이 작아지면 item들이 밑으로 내려감(item크기가 줄어들지않음)

4. flex-flow

• flex-flow : column nowrap; => flow-direction 과 flex-wrap을 동시에 쓰기

5. justify-content (메인축 정렬)

• justify-content : flex-start => 중심축이 수직이면 위부터, 중심축이 수평이면 왼쪽부터 시작
• justify-content : flex-end => item의 순서는 유지하되 오른쪽으로 붙음 (flex-direction에서 reverse와는 다름)
• justify-content : center => item 모음을 가운데로 정렬
• justify-content : space-aroud => item을 둘러싸고 공간을 넣어주는것( 가장 양쪽의 space만 작고 중간의 spaces는 넓음)
• justify-content : space-evenly => 화면상 모두 item사이에 모두 똑같은 간격을 넣어줌
• justify-content : space-berween => 가장 양쪽의 item이 화면 끝과 붙고, 중간의 item만 동일한 간격으로 정렬

6. align-content (반대축 정렬)

• align-content: space-between; => (메인축이 만약 수평정렬이라면) 수직정렬을 지정. 특히 위 아래는 화면 위아래에 딱 붙고 중간의 item들이 동일한 간격으로 정렬
• align-content: center; => 모든 아이템들이 반대축의 기준으로 중앙으로 정렬

7. align-items (반대축 정렬)

• align-items : baseline; => div의 박스들의 크기가 전부 다를때, 텍스트를 기준으로 높이나 위치를 맞출때 사용

이렇게 또 하나 배웠군