24일차 복습

flex속성

최근 새로 나온 속성으로, 박스(컨테이너)들의 원활한 배치를 위해 만들어졌다.

우리가 웹사이트에 메뉴창(nav창)을 만들거나, 링크를 걸거나, 그 외에도 어떤 기능이 있는 버튼(글자)을 만들 경우, 대부분은 보기 편하게 어떤 방식으로든 정렬되어 있다.

flex속성은 이런 정렬을 쉽게 해주기 위해 만들어졌다.

만약 flex속성이 없다면 position을 absolute로 지정해 좌표를 지정해주거나 float속성으로 일일이 정렬해야 할것이다.

 

 

flex의 기본 개념

flex는 간단히 말해 컨테이너 태그를 크게 세로축, 가로축으로 나눠서, 사용자의 편의에 맞게 정렬할수 있게 해주는 속성이다. 이때, 컨테이너의 내용물( 이해하기 쉽게 div형태의 박스라고 가정하자)의 height 속성을 컨테이너의 높이로 자동 설정된다.

.container{ display:flex; }

보다시피 내용물에는 height값을 지정해주지 않았으나, 자동적으로 컨테이너의 높이에 맞춰진 것을 볼 수 있다.

.컨테이너{ display : flex} 형식으로 지정해줄수 있다. 보통 컨테이너(상위 태그)를 클래스 속성으로 지정한다.

기본값은 가로축(row)로 설정된다.

flex를 이용한 정렬 방법

축 변경하기

아무것도 하지 않고 display:row 로 속성을 줘버리면 가로(row)로 지정된다. 따라서 세로열로 값을 주고 싶다면 

flex-direction:column으로 지정해줘야 한다.

.container{ display: flex;
            flex-direction: column;}

세로축으로 정렬할때는 높이가 늘어나지 않는다.

컨테이너 높이를 지정해주지 않으면 내용물 박스를 모두 담을 수 있는 최소치로 자동 설정된다.

 

flex에는 reverse옵션이 존재한다. 이 속성을 사용하면 역으로 정렬된다.

  가독성을 위해 html코드는 생략했다.
  
    .container {
        background-color: #eee;
        border: 1px solid #222;
        margin-bottom: 10px;
        height: 500px;
        /* 컨테이너를 플럭스박스로 지정 */
        display: flex;
    }
    .box {/*컨테이너 안에 박스를 넣음*/
        width: 80px;
        background-color: green;
        margin: 5px;
        padding: 5px 45px;
        }
        
    p {color: white;
       text-align: center;
       }
       
    .opt1 {flex-direction: row;}
    .opt2 { lex-direction: row-reverse;}
    .opt3 { flex-direction: column;}
    .opt4 {flex-direction: column-reverse;}

flex-direction: 속성의 종류들

1.row : 가로정렬. height를 지정해주지 않으면 자동 설정됨

2. row-reverse : 오른쪽-가로정렬.

3. column : 세로정렬. 컨테이너의 크기가 자동으로 늘어남

4. column-reverse : 아래->위 정렬

 

줄바꿈 속성: wrap

내용물을 줄바꿈해줄지, 아니면 그냥 가지고 있을지 정한다. 줄바꿈을 한다면 내용물의 크기가 설정된 값으로 나오지만, 줄바꿈을 하지 않으면 컨테이너를 빠져나가지 않는 대신에 내용물의 크기가 줄어든다. 기본속성은 nowrap이다.

아래의 예시를 보자.

둘다 내용물의 width는 150px로 설정되어 있다.

위의 컨테이너는 flex-wrap: nowrap; 속성이고, 아래는 flex-wrap: wrap속성이다.

nowrap 속성을 준 위의 컨테이너는 내용물이 컨테이너를 빠져나가지 않는 대신, 설정된 width의 값은 받지 못하고 있다.

반면 wrap의 속성을 준 아래 컨테이너는 온전하게 width속성이 적용되어 있다. 이때 컨테이너의 크기는 자동으로 늘어난다.

 

flex-wrap: wrap-reverse; : 아래->위 순으로, 역순으로 줄바꿈된다.

 

flex-flow

direction과 wrap를 한꺼번에 정할수 있는 속성

flex-flow: row/column  nowrap/wrap; 형식으로 쓴다. 가로축, 세로축을 정하고, 줄바꿈을 지정한다. 만약 쓰지 않으면 기본값이 자동으로 적용된다.

reverse형식을 사용할수 있다.

.container{flex-flow: column-reverse nowrap;}

column-reverse 로 지정함.

아이템의 가로 정렬-  justity-content: 속성;

flex-direction: row;일때, 아이템(박스, 콘텐츠)들을 정렬하는 방법

1. flex-start : 기본값. 시작점(왼쪽)으로 정렬.

2. flex-end : 끝점(오른쪽에 맞춤)으로 정렬.

3. center : 중앙정렬

4. space-between : 아이템을 컨테이너 양끝으로 맞추고, 아이템과 아이템 사이 공간이 똑같아지도록 정렬.

5. space-around : 아이템이 양옆 여백을 동일하게 같도록 정렬. 아이템과 아이템 사이의 공간은 여백이 두배가 된다.

6. space-evenly : 컨테이너 테두리와 아이템 사이의 공간을 아이템과 아이템 사이의 공간과 동일하게 정렬

space-around의 경우, 아이템과 아이템 사이의 공간이 2배가 된다.

 

아이템의 세로(수직) 정렬 - align-items:속성 (wrap이건 nowrap이건 다 됨)

flex-direction: row일때, 세로로 아이템들을 정렬하는 방법

1. flex-start; : 시작점 정렬

2. flex-end; : 끝점에 맞춤

3. center; : 중앙정렬

4. strech; : 기본값. 컨테이너의 여백이 업게 아이템 박스를 늘림

5. baseline; : 아이템 크기를 글자 밑선에 맞춤

 

*align: 나란히하다. ~에 맞춰 조정하다. 가지런히 놓다.

 

align-items:flex-start;

align-items: flex-end;

 

align-items: center;

align-items: stretch;

align-items: baseline;

아이템들 사이에 동일한 크기의 세로 여백이 생긴다는 점을 유의하자.

 

아이템의 세로(수직) 정렬 - align-content: 속성 (wrap일때만 가능)

아이템이 여러줄일때 교차 정렬하는 속성이다. align-items와 비슷하나 여백이 안생긴다.

justify-content의 세로버전이다. space-evenly속성은 없다.

1. flex-start; 시작점에 맞춤 

2. flex-end; 끝점에 맞춤

3. center; 중앙 정렬

4. space-between;: 양 끝 테두리에 아이템을 정렬한다

5. space-around;: 테두리와 아이템 사이의 공간이 있도록 정렬한다. 이때, 아이템과 아이템 사이의 여백은 두배가 된다.

6. stretch;:: 기본값. 아이템을 늘려서 정렬한다.

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

flex-start, flex-end, center의 경우, align-items와 다르게 공백이 없다!

 

아이템의 각자 정렬- align-self: 속성

본래 꽤 내용이 되지만 배운 것만 정리하겠다.

아이템 각자를 정렬하는 방식이다.

당연하게도 아이템에 공백이 없으니 공백이 있는 정렬(content)은 안된다.

 

1. flex-start; :아이템을 위쪽 정렬한다.

2. flex-end; : 아이템을 아래쪽 정렬한다.

3. center; : 아이템을 컨테이너 중간에 정렬한다.

4. stretch; : 기본값. 아이템을 컨테이너 크기에 맞추기 위해 늘린다.

5. baseline; : 아이템 내부의 글자 크기에 맞춘다.