CSS Flex 를 활용하여 자기소개 페이지에 적용해 보았는데, 활용하고 직접 적용한 방식을 기록한다.

FLEX란 무엇인가?

레이아웃에서 요소를 배치시킬 때 float, inline-block 등 위치를 이동시킬때 자주 쓰이는것들을 강화하고 편의성을 높인 기능이다.

1. FLEX의 시작

flex는 우선 필수적으로 부모요소와 그 아래 속하는 자식요소가 필요하다.
나는 부모요소는 container, 자식요소는 content, item 등 여러 종류로 칭했다.

<div class="container">
  <div class="content">helloflex</div>
</div>

.containter {
 display : flex;

그리고 CSS에 display : flex; 를 적용하는게 flex의 시작이다.

기본적으로 아무 옵션도 주지 않았을 때

이렇게 각각의 item, item2, item3 들이 가로로 쭉 나열되게 된다. width는 안의 내용의 width 만큼 차지하고 height는 초기 설정이 없을땐 부모 container의 height 만큼 늘어난다.

2. flex-direction

안의 item, content 들이 배치되는 방향을 결정하는 속성이다.

.containter {
	flex-direction: row;
	flex-direction: column;
	flex-direction: row-reverse;
	flex-direction: column-reverse;
    }

row : (미지정시 기본값) item들이 가로 방향으로 배치된다.

row-reverse : item들이 역순으로 가로 방향으로 배치된다.

column : item들이 세로 방향으로 배치된다.

column-reverse : item들이 역순으로 세로 방향으로 배치된다.

3. flex-wrap

container의 width 값을 넘어설 만큼 item들이 많아질때 그 item 들의 줄바꿈을 지정하는 속성이다.

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

nowrap : (미지정시 기본값) 줄바꿈을 하지 않고 container의 범위를 넘어갑니다.
wrap: 넘어간 item 줄바꿈 합니다.

wrap-reverse: item이 역순으로 줄바꿈 합니다.

4. justify-content

FLEX의 정렬을 위한 속성이다.

.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-로 칭해지는 속성은 가로 방향으로 item들이 벌어진다고 생각하면 쉬운데, 사실 중심이 되는 심지가 가운데에 있고 그 심지에서 꽂힌 item들 좌우로 움직이는 원리이다.

justify-content: flex-start; : (미지정시 기본값) 맨 위에 보이는 flex 시작 배치와 같다.

justify-content: flex-end;
: item들을 제일 끝으로 정렬한다.
row 일때는 오른쪽, column 일대는 아래쪽으로 몰리게 된다.

justify-content: center; : item들을 가운데로 정렬한다.

justify-content: space-between; : item들 사이(between)에 동일한 간격을 준다.

justify-content: space-around; : item들 둘레(around)에 동일한 간격을 준다.

justify-content: space-evenly;
: item들 사이, 양 끝 모두에 동일한 간격을 준다.
*** IE에서 미지원이라고 하는데, IE가 사라지는만큼 더 활용하게 될 속성이라고 생각한다.

이것들 말고도 많은 기능과 설정들이 있으나 실행시 적용이 안되는 경우도 있었고 홈페이지는 완성되지 않았기 때문에 활용하면서 더 추가해볼까 한다.

(페이지 제작에 실제 사용한 모습.. 순서도 뒤죽박죽에 보기 힘들지만 더 많은 속성을 사용해보고 싶다.)