하루하루 꾸준히, 인생은 되는대로

카테고리 없음

CSS 레이아웃 -flex

긤효중 2022. 4. 5. 22:48

flex는 container item들이 부모와 자식 관계일 때 container에 display:flex속성을 줌으로서 설정할 수 있다.

     <div class = "container">
         <div class = "items">hello</div>
         <div class = "items">hello2</div>
         <div class = "items">hello3</div>
     </div>
       
이런식으로 flex의 아이템들을 flex 컨테이너가 감싸는 구조이다.
 
flex의 속성은 1_)컨테이너에 주는 속성
                  2_)아이템에 주는 속성
 
이렇게 나뉘어 진다.
 
1_)컨테이너에 주는 속성 
 
display:flex -> 위의 속성을 사용하면 기본적으로 레이아웃은 그림과 같다.
 

flex아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼만 차지한다. height는 컨테이너의 높이만큼 늘어난다. 

display:inline-flex는 inline요소와 같은 수평 쌓임을 가진다.

flex-direction속성

flex아이템들이 배치되는 축의 방향을 결정하는 태그이다. (가로 or 세로)

.container{
    flex-direction: row; /*가로 */
    flex-direction: column; /*세로 */
}
 

줄넘김 처리 설정 flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 공간이 없을 때, 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

flex-wrap:nowrap -> 기본값, 줄바꿈을 하지 않는다. 넘치면 그냥 삐져나옴

flex-wrap:wrap -> 줄바꿈을 한다.

flex-wrap:wrap-reverse -> 줄바꿈을 하는데 , 아이템을 역순으로 배치한다. 

 

메인축 방향 정렬 justify-content

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 justify-content:flex-start -> 기본값, 아이템들을 시작점으로 정렬한다. 

flex-direction이 row일때는 왼쪽, flex-direction이 column일떄는 위이다.

 

 justify-content:flex-end ->아이템들을 끝점으로 정렬한다.

flex-direction이 row일떄는 오른쪽, flex-directiond이 column일떄는 아래이다.

 

 justify-content:center -> 아이템들을 가운데로 정렬한다.

 

 justify-content:space-between -> 아이템들의 사이(space)에 균일한 간격을 만들어준다.

 

justify-content:space-around -> 아이템들의 둘레(around)에 균일한 둘레를 만들어준다.

 

 

수직축 방향 정렬 align-items

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

수직 방향으로 아이템들을 정렬하는 속성이다.

 

align-items:flex-start -> 아이템들을 시작점으로 정렬한다. 

flex-direction이 row일떄는 위, flex-direction이 column일때는 왼쪽이다.

 

align-items:flex-end-> 아이템들을 끝으로 정렬한다.

flex-direction이 row일때는 아래, flex-direction이 column일떄는 오른쪽이다.

 

align-items:center -> 아이템들을 가운데로 정렬한다.

 

 

2_)flex 아이템에 적용하는 속성들

 

flex-basis

flex-basis는 flex아이템의 기본 크기를 설정한다. (flex-direction이 row일떄는 너비, flex-direction이 column일떄는 높이)

 

flex-grow

flex-grow는 아이템이 flex-basis값보다 커질 수 있는지를 결정하는 속성이다.

flex-grow는 숫자 값이 들어가고, 숫자가 0보다 크면 해당 아이템이 유연한(flexible) 박스로 변하고, 원래의 크기보다 커지며 빈 공간을 메운다.

기본값은 0이다.

 

flex-shrink

flex-shrink속성은 아이템이 flex-basis보다 작아질 수 있는지를 결정하는 속성이다.

flex-shrink에는 숫자 값이 들어가고 , 숫자가 0보다 크면 아이템이 유연한 박스로 변하고, 원래의 크기보다 작아진다.

 

align-self 

align-items이 전체 아이템의 수직축 정렬이라면 , align-self는 해당 아이템의 수직 축 정렬이다.