[CSS] Flexbox(레이아웃) 정리

Flexbox : 레이아웃

• Display 속성을 사용함
• Float보다 호율적으로 사용이 가능함
• 가로 세로로 아이템들을 정렬함
• 아이템들의 순서나 비율등을 쉽게 적용함

⭐️Flex는 main-axis(주축)과 cross-axis(교차축)으로 구성된다

 

※ flex를 적용하기 위해 부모요소의 CSS에서 시작한다.

.container {
    display: flex;
 }

※ 단, 자식요소에게 전부 적용하기 싫다면 싫다면 >(꺽새)를 입력하게 된다면

container 안에 있는 div태그 하나만 선택하게 된다.

만약 >(꺽새를) 입력하지 않고 사용한다면

container안에 div태그가 몇개있던 전부 적용이 된다.

 

.container > div {
	padding: 10px;
	text-align: center;
	font-size: 2em;
	color: #ffeead;
    /* 자동 줄바꾸기 */
    flex-wrap: wrap;
}

.container {
  flex-direction: row or row-reverse or column or column-reverse;
}

.container{ 
   flex-wrap: nowrap or wrap or wrap-reverse; 
}

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

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

.item {
  align-self: auto or flex-start or flex-end or center or baseline or stretch;
}

.search {
	/* 다른 CSS속성에도 flex:1; 적용시키게 된다면 1:1비율로 맞춰지게 된다.*/
    flex: 1;
}

.logout {
	/* order가 음수라면 앞쪽으로 이동 양수라면 뒤쪽으로 이동한다.*/
   order: -1;
}