CSS Flex를 알아보자

Mido·2023년 2월 16일
0

기본기

목록 보기
5/18

Flex가 도대체 무엇이냐?

웹 개발에서 기본이자 가장 중요한 것 중 하나인 레이아웃 배치를 쉽게 하기 위해 나온 것이다. 더 최근에 나온 grid도 있지만 flex가 호환성이 좋다.

우리는 레이아웃 배치를 하기 위해 float이나 inline-block을 사용해 왔는데
사용해보면 알겠지만 간단한 웹 페이지를 제작할 때는 문제가 생기지 않지만 조금 복잡한 디자인을 하기 위해서는 코드가 복잡해지고 머리를 많이 써야하는 경우가 생긴다.

그럴 때 사용할 수 있는 css display속성으로 flex를 사용할 수 있다.
말 그대로 컨테이너 div를 flexible하게 만들고 다양한 기능을 사용할 수 있다.

<div class="Container">
  <div class="b">1</div>
  <div class="b">2</div>
</div>

.Container{
  width:100px;
  height:100px;
  background-color:yellow; 
}
.b{
  text-align:center;
  margin:5px;
  width:30px;
  height:30px;
  background-color:blue;
}

기본적으로 컨테이너에 div를 넣게되면 위와 같이 다른 div가 오면 자동으로 줄바꿈이 된다 span 태그를 사용하면 줄바꿈이 이루어지지 않지만 div를 사용할 때 줄을 바꾸지 않고 가로로 배열하고 싶을 때는 float:left 와 같은 방식으로 속성을 주었다.
하지만 페이지가 복잡해지고 가로나 세로의 가운데 정렬을 해야할 상황이 많아질 때는 float이나 inline-block로만 사용해서는 여간 귀찮은 게 아니다.

세 개의 컨테이너 중

첫 번째는 flex만 적용하였는데 자동으로 아이템들의 높이가 조절되었다.

두 번째 컨테이너는
justify-content : center; justify는 메인 축인 가로를 중앙에 정렬하는 속성이다.
align-items : center; align은 세로 축으로 정렬하는 방식으로
두 개를 모두 적용시켜 4개의 아이템들이 정 중앙에 배치되었다.

세 번째 컨테이너는 flex-wrap: wrap을 적용시켰는데 이는 컨테이너 속 아이템들의 넓이가 컨테이너를 넘어가면 자동으로 줄바꿈이 되게 만드는 속성이다.

	/* justify-content: flex-start; */ 아이템 전체의 수평 정렬
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */


	/* align-items: stretch; */
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */      아이템 전체의 수직 정렬
    
    /* align-self: auto; */
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */		 아이템 하나의 수직정렬
    
    /* flex-wrap: wrap; */
	/* align-content: stretch; */    
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
    
    /* flex-basis: auto; 기본값 */
    
    /* flex-grow */  아이템들을 특정 비율로 나누어 늘림 
    /* flex-shrink */ 아이템들을 특정 비율로 나누어 줄임
    등등 다양한 속성 값이 있다.
profile
Front-End

0개의 댓글