CSS_Flexbox_Container

 

Flexbox는 기존 계산이나 조금 복잡한 레이아웃 과정을 줄이고

직관적으로 만들어 주는 레이아웃 속성이다.

​

flexbox를 사용하기 위해서는 CSS에 우선 flexbox를 선언해야 한다.

​

요렇게

 

.container {

display: flex;

}

​

 

그 밑에는 item을 만들어 실제 브라우저에 나타날 box를 만들 수 있다.

- item은 전체적인 디자인을 위한 상위 단계이며, 각각의 box들은 item 뒤에 넘버링으로 표시하였다.

​

container> item> item# 부모- 자식 관계로 영향을 받는다.

그러므로 Container에서 사용하는 속성과 item에서 사용하는 속성도 다르다.

​

.item {

width: 40px;

height: 40px;

border: 1px solid black;

}

​

.item1{

background:#9a0007;

flex-shrink: 2;

}

.item2{

background:#d32f2f;

flex-shrink: 1;

}

.item3{

background:#ff5722;

flex-shrink: 1;

}

flexbox의 레이아웃은 중심축(main-axis)과 반대축(cross-axis)에 따라 움직인다.

중심축은 수평일 수도 있고 수평일수도 있으며, 반대축은 말 그대로 중심축의 반대이다.

​

아까 말한 Container와 item의 속성의 사용이 서로 다르며,

Container에서 사용하는 속성은 다음과 같다.

​

flex-direction : 박스의 방향을 설정함

① row -세로 ex) flex-direction : row;

② column - 가로 ex) flex-direction : column;

 

※ 뒤에 -reverse를 입력하면 박스들이 역으로 배치된다. ex) flex-direction : row-reverse

item1 -> item2 -> item3

item3-> item2 -> item1

​

​

flex-wrap : no;

페이지가 줄어도 박스크기만 줄어듬. (찌부가 될 지언정 박스는 서로 붙어 있는다)

 

flex-flow : wrap;

페이지 크기가 줄어들면 박스 크기가 이동함.

자세한 예시는 밑에 그림으로 확인하자.

​

flex-flow

direction과 wrap의 기능이 합쳐진 기능이다.

​

 

flex-flow : row wrap;

옆에 그림처럼 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Justify-content : flex-start;

박스의 배치 방식을 의미함 -> 왼쪽부터 배치함

 

: flex-end;

반대로 오른쪽 축에 붙어서 배치됨

 

: center;

박스들의 위치가 가운데 정렬됨

 

: space-around;

박스들의 마다 빈 스페이스 생긴다.

evnely와 다른 점은 맨 앞과 맨 뒷열은 박스간의 겹치는 구간이 없어 조금 더 좁다.

​

: space-evenly;

박스들 마다 생기는 빈 스페이스의 간격이 동일함 ( 맨 앞이나 뒷 열도 동일한 간격임)

: space-between;

 

aligan-items: center;

justify-content가 중심축에서 배치되면 반대축 기준으로 배치가 진행됨.

 

:baseline;

박스간의 크기가 다르더라도 text를 기준으로 균등한 위치에 배치됨.

​