[Front] Css 디자인 Flex/Grid

Flex

Flex 레이아웃을 만들기 위한 구조

• html

<div class="container">
	<div class="item">item1</div>
	<div class="item">item2</div>
	<div class="item">item2</div>
</div>

• css

.container {
	display: flex;
	/* display: inline-flex; */
}

 

Flex에 속성들은 컨테이너에 적용하는 속성

• inline-flex:  반응형으로 동작하지 않음, 화면 창이 작아지거나 하면 아랫줄로 block이 내려

• 아이템들이 배치된 방향의 축을 Main Axis, 그 와 수직인 방향을 Cross Axis라고 부름
• flex-directoin: 축의 방향을 결정하는 속성 즉, Main Axis의 방향을 결정
  아래와 같은 4가지 방향이 존재

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

• flex-wrap: 컨테이너가 더 이상 아템을 한줄에 담지 못할 때 아이템 줄바꿈을 어떻게 할지 결정
  nowrap은 화면에서 보이지 않고, wrap은 마지막 item이 아래칸으로 내려감, wrap-reverse는 반대로 윗칸으로 올라감

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

• flex-flow: flex-direction과 flex-wrap을 한번에 지정하는 단축 속성

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

• justify와 align: justify는 Main Axis 방향으로 정렬, Align은 Cross Axis 방향으로 정렬

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

 

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