[html] 레이아웃 잡기(flex)

flex의 기본은 container와 그 안에 들어가는 item을 각각 만들어줘야 한다는 것입니다.

그리고 각각의 태그에 맞게 속성들을 집어넣어줘야 합니다.

 

부모 엘리먼트에 다음과 같이 추가한다.

display: flex;
flex-direction: row; /* row, row-reverse, column, column-reverse가 있음 */

자식 엘리먼트에는 다음과 같이 줄 수 있다.

/* 부모 엘리먼트를 꽉 채우는 레이아웃 */
flex-grow: 0; /* 기본은 0, 화면을 꽉 채우려면 1, 요소를 선택해서 2로 주면 요소의 크기가 더 커짐 */
flex-basis: 200px; /* 축에 따라서 축 방향으로 크기가 설정됨 */

/* 화면이 작아졌을 때 레이아웃 */
flex-shrink: 0; /* 화면이 작아지더라도 자신의 크기는 줄어들지 않음, 1이면 줄어듬, flex-grow와 동일하게 비율에 따라 줄어듬*/

.item:nth-child(2){
 /* 이런식의 선택이 도움이 됨 */
}

 

자식 엘리먼트에 flex-wrap: wrap(!= nowrap)을 하게되면, 부모엘리먼트에 넘치지 않게 채워진다.

부모 엘리먼트에 align-items를 하면 세로를 꽉 채울지 말지에 대해 결정 할 수 있다.

(options: flex-start, flex-end, center, baseline, stretch)

부모 엘리먼트에 justify-content: center를 지정하면 자식 엘리먼트가 가운데에 위치한다.