참고자료
https://studiomeal.com/archives/197
웹, 앱 개발 시 레이아웃의 뼈대를 그리는 단계로
단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것
실물 크기의 모형이란 뜻
대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠 흐름을 따라 작업함
height
속성을 추가하면 수평 분할 직관적으로 가능Flexbox 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다는 것임
display : flex
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;
}
displau: flex
속성 적용main {
display: flex;
}
flexbox
속성들flex-direction
: 정렬 축 정하기아무 설정하지 않을 경우 기본적으로 가로 정렬
flex-direction : row
flex-direction : column
flex-direction : row-reverse
flex-direction : column-reverse
flex-wrap
: 줄바꿈 설정하기flex-wrap
속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면
자동 줄 바꿈을 할 것인지 정함 아무 설정 없을 경우 줄 바꿈을 하지 않는다
box의 개수를 늘려서 확인
flex-wrap : nowrap
(기본값)
flex-wrap : wrap
flex-wrap : wrap-reverse
justify-content
: 축 수평 방향 정렬justify-content
자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함
flex-start
, flex-end
, center
, space-between
, space-around
align-items
: 축 수직 방향 정렬align-items
속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함
stretch
, flex-start
, flex-end
, center
, baseline
flex
: flexbox속성 중 자식 요소에 적용해야하는 속성 - 요소가 차지하는 공간 설정
부모 요소에 적용하는 속성은 자식 요소들의 정렬과 관련
자식 요소에 적용하는 속성인 flex
는 요소가 차지하는 공간과 관련
flex
의 3가지 속성 : grow
, shrink
, basis
1. grow
는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
2. shrink
는 요소의 크기가 줄어들어야 할 때 어마나 줄어들 것인지
3. basis
는 늘어나고 줄어드는 것 상관없이 요소의 기본 크기가 얼마인지
flex
속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용
flex: 0 1 auto
밑의 코드와 같다.
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex
속성 3가지 지정값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 기본값
box1 flex-grow: 1;
box1, box2 flex-grow: 1
box1, box2, box3 flex-grow: 1
정렬축으로 공간이 있을 때 각 자식 요소들이 얼마나 늘어나서
남는 공간을 차지할 것인지 비율을 정하는 것으로
첫 번째 예시에서는 1 : 0 : 0
두 번째 예시에서는 1 : 1 : 0
세 번째 예시에서는 1 : 1 : 1 로 빈 공간을 나눠 가진 것임
➡️ 팽창지수의 절대적 크기가 아니라 총합에서의 비율로 빈 공간을 차지한다.
shrink
(수축 지수)shrink
는 grow
와 반대로 설정한 비율만큼 박스 크기가 작아진다.
즉, shrink
의 비율이 클수록 더 많이 줄어든다.
flex-grow
와 flex-shrink
속성을 함께 사용하는 일은 추천하지 않음
basis
(기본 크기)basis
는 자식박스가 flex-grow
나 flex-shrink
에 의해 늘어나거나
줄어들기 전에 가지는 기본 크기
flex-grow: 0;
인 경우에는 flex-basis
의 속의 값이 유지됨
display: flex
가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라서
basis
로 설정된 크기가 항상 유지되는 것은 아니다