[css] flex 웹 레이아웃을 위한 속성

CSS / FLEX

 

flex layout

웹 페이지의 레이아웃을 잡을 때 사용하는 속성
레이아웃 배치 기능에 중점을 맞춰 고안했기 때문에 기존 방식보다 수월한 레이아웃 구성이 가능하다.
상황에 따라 내부 요소들의 크기를 유연하게 조절하는 방식의 레이아웃 구성이 가능하다.

flex는 부모 요소인 flex container와 자식 요소인 flex로 구성된다. 
flex container는 display flex로 설정이 가능하다.

 

 

---

container를 flex로 설정

 

기존 flex로 설정하지 않은 div 영역은 block 요소로 수직으로 생성된다.

 

.container{
  background:beige;
  height: 100vh;
  display:flex;
  
}

 

display를 flex로 설정해주면 영역내에 수평으로 정렬된다. (기본값 수평)

---

요소들을 수직, 수평으로 구성하는 방법

flex-direction을 사용하면 요소를 수직, 수평, 역수직, 역수평 으로 정렬하는게 가능하다.

• row : 요소를 수평으로 정렬한다. (기본값)
• column : 요소를 수직으로 정렬한다. 
• row-reverse : 요소를 수평으로 정렬하되 반대로 정렬한다.
• column : 요소를 수직으로 졍렬하되 반대로 정렬한다.

  flex-direction: row;
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;

row

 

column

---

아이템 랩핑 (wrap, nowrap)

아이템들이 컨테이너 내부에 꽉차서 크기가 넘치게 될 경우 줄바꿈을하여 정렬 할지
줄 바꾸지 않고 꾹꾹 눌러 담을지 정할 수 있다. 
flex-wrap 을 사용한다.

• nowrap : 줄바꿈하지 않고 아이템의 크기를 줄인다.(기본값)
• wrap : 크기를 줄이지 않고 한칸 내린다.
• wrap-reverse : 한칸 내리는데 거꾸로 위에서부터 채운다.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-flow를 이용하면 direction과 wrap을 동시에 설정 가능하다. 
ex >  flex-flow:column nowrap;

.container{
    flex-flow:column nowrap; 
}

 

---

아이템 배치 및 위치 지정 (justify-content, align-items, align-content)

아이템들의 위치를 처음에 맞춰서 채우거나 끝에 맞춰서 채울수 있고 ,  아이템들끼리의 일정한 간격으로 띄워서 배치하는것도 가능하다 . 

justify-content는  중심축 (row면 수평, column이면 수직)을 기준으로 위치를 잡아주고
align-items는 반대축을 기준으로 위치를 잡아준다.

---

justify-content

justify-content: flex-end /*요소를 맨 오른쪽에 맞춘다.*/
justify-content: center /*요소를 가운데에 맞춘다.*/
justify-content: space-around /* 요소끼리의 일정한 테두리 만큼 간격을 벌린다.*/
justify-content: space-evenly /* 요소끼리 일정한 간격만큼 벌린다 ( 처음, 끝에도 적용)*/
justify-content: space-between /* 첫,끝 요소는 맨 끝에 붙힌 후에 남은요소끼리 일정한 간격만큼 벌린다.*/

---

align-items

align-items : center /* 반대축의 중앙으로 justify-content의 space-around처럼 간격을 맞춘다 */
align-items : baseline /* 텍스트를 모두 균등하게 보일수 있도록 중심을 맞춘다.*/

justify-content가 중심축으로 위치와 간격을 잡았다면 align-items는 반대축을 중심으로 위치를 잡는다.

align-content

align-content : flex-start  /* 컨테이너의 맨위에 정렬 */
align-content : flex-end /*컨테이너의 맨아래에 정렬*/
align-content : center  /*중앙으로 밀집*/
align-content : space-between /* 반대축기준으로 아이템 간격을 동일하게 */

---

item 속성값들

 

/* container는 flex로만 설정*/
.container{
  background:beige;
  height: 80vh;
  display:flex;
}

/* item 전체의 크기만 지정 */
.item{
  width:50px;
  height:50px;
}

 

아이템의 순서 정하기 (order)

.item{
    order: (n)
}

우선순위 : order  -> html의 먼저 작성된 순서

※ 잘 쓰이진 않는다. ! 

 

아이템의 사이즈 조절 (flex-grow, flex-shrink, flex-basis)

기본적으로 아이템들은 자신에게 주어진 사이즈 만큼만 유지하려고 하는데 (nowrap인 경우 줄어들긴 한다.)
flex-grow나 flex-shrink 를 설정하면  화면을 늘리거나 줄일 때 얼마나 늘어나고, 얼마나 줄어들지 설정이 가능하다.

flex-grow

.item{
    flex-grow: (n)
}

 

flex-grow를 주면 화면 전체를 채우려는 특성을 갖게 되고
각 요소들끼리의 원하는 비율 만큼 부여할 수 있다.

아이템들중 하나만 주면 하나만 최대값으로 늘어난다.

값을 2배씩 늘리면 크기도 2배씩 늘어나는 것을 볼 수 있다.

 

flex-shrink

.item{
    flex-shrink: (n)
}

flex-shrink는 화면이 줄어들 때 아이템의 크기가 어느정도로 줄어들지 설정이 가능하다.

 

flex-basis

.item{
    flex-basis: (n)%
}

아이템이 공간을 어느정도 차지해야하는지 좀 더 세부적으로 명시할 수 있다.
기본값은 auto로 설정되어있고 grow나 shrink에 맞춰서 아이템이 변형된다.
직접 명시할 경우 다른 아이템들에 비해 크기(%)를 지정할 수 있다.

이미지를 늘리고 줄일 때 서로의 비율에 맞춰 사이즈가 조절이 된다.

---

아이템 하나만 영역 설정하기

컨테이너 레벨에서는 justify-content, align-items, align-content를 이용해 영역 전체의 위치를 잡아주었다면 
align-self를 사용하면 아이템 개별적으로 위치를 잡게 해주는 속성이 있다.  

align-self

 

.item{
    align-self: flex-start | flex-end | center | stretch | baseline
 }