CSS, flex 레이아웃 도장깨기

목차

• flex
• flex HTML 구조
• flex 부모속성
  • display : flex
  • flex-direction
  • flex-wrap
  • justifiy-content
  • align-items
• flex 자식속성
  • flex-basis
  • flex-grow

flex

Flexible box, Flex Box라고 부른다. 레이아웃 배치 전용으로 사용된다.

flex HTML 구조

- 부모 div.container는 flex container로 불리는데 flex의 영향을 받는 전체 공간을 의미한다.
- 자식 div.item는 flex item이라 불린다.

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

flex 부모속성

display : flex

-

//부모에 적용하는 속성
.container{  display: flex;  //혹은 display : inline-flex;}

display : flex; // 자식요소들이 가로방향으로 배치
display : block; // 자식요소들이 세로방향으로 배치

flex-direction

- 줄바꿈을 결정한다.

.container {
	flex-direction: row; // 아이템을 가로로 정렬
	flex-direction: column; //아이템을 역순으로 가로 정렬
	flex-direction: row-reverse; // 아이템을 세로 방향
	flex-direction: column-reverse; // 아이템들을 역순 세로로 배치
}

flex-wrap

- 컨테이너에 여유가 없을시 아이템 줄바꿈을 설정한다.

.container {
	flex-wrap: nowrap; // 줄바꿈을 하지 않는다.
	flex-wrap: wrap; // 줄바꿈을 한다.
	flex-wrap: wrap-reverse; // 줄바꿈하면서 역순으로 배치한다, 빠져나온 아이템을 앞부분으로 정렬
    	flex-flow: row wrap; //flex-direction, flex-wrap을 한꺼번에 지정할 수 있다.
}

justifiy-content

- 메인축(가로) 방향을 정렬한다.

.container {
	justify-content: flex-start; // row시 왼쪽, column시 위쪽
	jutify-content: flex-end; // // row시 오른쪽 , column시 아래쪽
	justify-content: center; 
	justify-content: space-between; //아이템들 사이를 균등하게 조절한다.
	justify-content: space-around; // 아이템의 둘레를 균등하게 조절한다. 각 왼쪽, 오른쪽
	justify-content: space-evenly; // 아이템의 양끝을 균등하게 조절한다.
}

align-items

- 수직축 아이템을 정렬한다.

container {
	align-items: stretch; // 수직까지 끝까지 늘린다. (스테레칭)
	align-items: flex-start; // row시 위, cloumn시 왼쪽
	align-items: flex-end; // row시 아래, cloumn시 오른쪽
	align-items: center; 
	align-items: baseline; // 텍스트 기준라인으로 정렬한다.
}

* 아이템 가운데 정렬

.container {
	justify-content: center;
	align-item: center;
}

flex 자식속성

flex-basis

- 아이템의 기본 크기를 설정한다.
flex-direction이 row일 시 너비, column일 시 높이를 의미한다.

.item {
	flex-basis: auto; // 
    	flex-basis: 100px; // 100px이 안되는 아이템은 늘어나고, 100px를 넘는 아이템은 변동없다.
}

flex-grow

- 아이템이 flex-basis의 값보다 커질 수 있는지 설정한다.
- 0, 늘어나지 않음 / 1, 늘어난다.

.item {
	flex-grow: 1; // 혹은 0
}

flex

- flex-grow, flex-shrink, flex-basis를 축약해서 사용가능

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 300px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */
}