Unit3 - HTML/CSS 활용

코드스테이츠 - 유어클래스 콘텐츠를 참고하여 작성하였습니다.

[Day 2]

2023년 6월 27일

display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법

<main>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
</main>

main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}

부모 요소인

요소에 display: flex 속성을 적용하면,

main {
  display: flex;
  border: 1px dotted red;
}

부모 요소에 적용해야 하는 Flexbox 속성들

1. flex-direction : 정렬 축 정하기

main {
	display: flex;
	flex-direction : row;
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

2. flex-wrap : 줄 바꿈 설정하기

main {
	display: flex;
	flex-wrap : nowrap;
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

3. justify-content : 축 수평 방향 정렬

4. align-items : 축 수직 방향 정렬

flex-direction : row 인 경우 ↕️

flex-direction : column 인 경우 ↔

flex 속성의 값

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

자식 요소에 flex 속성을 따로 설정해 주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치

flex: 0 1 auto;

1. grow : 자식 박스는 얼마나 늘어날 수 있을까요?

<main>
    <div id="box1" class="box">box1</div>
    <div id="box2" class="box">box2</div>
    <div id="box3" class="box">box3</div>
</main>

flex-grow : 1로 설정해보면, flex-grow의 기본값은 0이므로 나머지 박스는 flex-grow : 0인 상태