D42 레이아웃 Flexbox
20241121
11글꼴 ~ 12변형관련~flexbox1~flexbox2~flexbox3~ 선택자 실습문제~ 학원홈페이지 헤드부분 복제
A. Flexbox
- 요소의 정렬 방향 순서, 요소간의 간격 등의 수치를 자동으로 처리해주는 스타일
※Flexbox 이용시 주의사항1). Flexbox 구성도
- flex-container : 정렬이 필요한 요소를 감싸는 부모요소
- item : 정렬이 적용되는 자식요소
flex는 flex-container 와 item에 사용되는 스타일 속성이 나뉜다2). Flexbox의 축
- 중심축 (정렬 진행 방향)
- 교차축 (정렬 진행 반대 방향)
/** 적용 확인을 위한 기본 컨데이너(부모)와 여러개의 아이템박스(자식) 생성 <div class="flex-container"> <div class="item item1">item1</div> <div class="item item2">item2</div> <div class="item item3">item3</div> <div class="item item4">item4</div> <div class="item item5">item5</div> <div class="item item6">item6</div> <div class="item item7">item7</div> <div class="item item8">item8</div> <div class="item item9">item9</div>.css파일 작성
/* 생성한 컨테이너와 하위 아이템 박스들을 통한 배치 */ .flex-container{ height: 700px; /* 생성 컨테이너의 기본 크기 설정 */ background-color: #ddd; /* 비교를 위한 컨테이너의 배경 생상 지정 */ display: flex; /* CSS에서 Flexbox 레이아웃 모델을 활성화 */ - /* ♣flex item 을 감싸는 "부모요소"를 지정하는 속성 item에 지정된 공백 요소가 모두 사라지고 content영역 만큼의 크기만 가지게 된다. item 들에 별도의 width/ height값이 지정 되어 있지 않다면 item의 높이는 flex-container(부모요소)의 높이/너비와 같아 진다 flex-direction : flex-container 전용 속성 중심축의 방향,시작 위치지정 속성 row: 중심축이 x축 cilumn : 중심축이 y축 */ flex-direction: row; /* 기본값 */ flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; */ /* flex-weap : 내부 item들을 포장 하는 속성 item들을 포장 여러줄로 배치할지, 아니면 포장하지 않고 한줄로 배치되게 할지 지정 flex-wrap: nowrap; /* item을 한줄로 배치(기본값)*/ flex-wrap: wrap; /* item을 여러줄로 배치 */ flex-wrap: wrap-reverse; /* item을 여러줄로 뒤에서부터 배치*/ /* flex-flow 중심축의 방향과 순서, 포장여부를 한번에 지정하는 속성 flex-flow == flex-direction + flex-wrap */ flex-flow: row wrap; /* justify-content : 요소의 내용을 정렬하는 속성 */ justify-content: flex-start; /*중식축 시작지점을 기준으로 요소를 정렬(기본값) */ justify-content: flex-end; /*중심축의 끝지점을 기준으로 정렬 */ justify-content: center; /*가운데 정렬*/ justify-content: space-around; /* item 주위에 일정한 크기의 공간 추가속성*/ justify-content: space-evenly; /* item주위에 일정한 크기의 공간을 추가 ,모든 공간이 동일한 크기를 가진다 */ justify-content: space-between; /*space-evenly를 기준 양끝을 부모요소에 붙게 하는 속성 */ - ♣ align-items : item들을 교차축 방향 정렬을 지정 속성 align-items: stretch; /* item들의 너비 또는 높이를 교차축 방향으로 늘려서(기본값) flex-container(부모)와 같은 크기를 가지도록 하는 속성*/ align-items: flex-start; /*컨테이너 내의 자식 요소들을 교차 축(cross axis) 방향(수직)으로 정렬*/ align-items: flex-end; /*교차축 기준으로 끝지점 정렬 */ align-items: center; /*교차축 기준 가운데 정렬 */ align-items: baseline; /* item 내부 content가 모두 한줄 배치되도록 중심축을 이동정 */ /* align-items: baseline; 적용후 변화 할때 */ .item2{padding: 10px;} .item3{padding: 20px;} .item6{padding: 30px;} }B. flexbox를 이용 요소 중앙 배치
<div id="con"> <div id="center"></div> </div> /*요소 가운데 배치 하기 실습*/ #con{ width: 450px; height: 450px; display: flex; justify-content: center; align-items: center; } #center{ width: 80px; height: 80px; background-color: blueviolet; }
/*html 5 형식 파일*/ <div class="flex-container"> <div class="item item1">item1</div> <div class="item item2">item2</div> <div class="item item3">item3</div> <div class="item item4">item4</div> <div class="item item5">item5</div> <div class="item item6">item6</div> <div class="item item7">item7</div> <div class="item item8">item8</div> <div class="item item9">item9</div> <div class="item item1">item1</div> <div class="item item2">item2</div> <div class="item item3">item3</div> <div class="item item4">item4</div> <div class="item item5">item5</div> <div class="item item6">item6</div> <div class="item item7">item7</div> <div class="item item8">item8</div> <div class="item item9">item9</div> </div> /*.css 파일*/ .flex-container{ height: 75vh; /* 현재 화면 기준 75% */ display: flex; flex-wrap: wrap;
♣align-content
교차축 방향으로 item들을 정렬 하는 방법과 관련된 속성
조건으로, flex-wrap 속성이 wrap일때만 사용가능 하다
속성 값은 justify-content와 같은 속성값을 사용한다
align-content: flex-start; / 교차축 시작기준으로 item들 정렬/
align-content: flex-end; / 교차축 끝 기준으로 item들 정렬/
align-content: center; / 교차축 기준으로 item들 가운데 정렬/
align-content: space-around; / 일정한 크기의 공간 정렬 /
align-content: space-evenly; / 똑같은 크기의 공간 정렬 /
align-content: space-between; / 끝부분은 붙이고 동일한 공간 정렬 /
}
## C. item 전용 속성들
### a.order : item들의 순서를 지정하는 속성item1
item2
item3
item4
item5
b. flex-grow(팽창)
- item요소를 부모요소의 빈공간을 가득 채우도록 팽장하는 정도를 지정하는 속성
<div class="flex-container"> <div class="item item1 grow1">item</div> <div class="item item2 grow2">item</div> <div class="item item3 grow3">item</div> <div class="item item4 grow4">item</div> </div> /* .css flex-grow : item이 부모요소 내부에서 비어있는 공간을 매꿀 수 있도록 자라나는 정도를 지정하는 속성 지정된 비율에 맞춰서 요소가 팽창함 (기본값0->팽창x) */ .grow1{ flex-grow: 1;} .grow2{ flex-grow: 2;} .grow3{ flex-grow: 3;} .grow4{ flex-grow: 4;}
c. flex-shrink (수축)
<div class="flex-container">
<div class="item item1 shrink1">item1</div>
<div class="item item2 shrink2">item2</div>
<div class="item item3 shrink3">item3</div>
<div class="item item4 shrink4">item4</div>
</div>
/*.css파일 flex-shrink item이 수축하는 정도를 지정하는 속성 (기본값 1)*/
.shrink1{flex-shrink: 0;}
.shrink2{flex-shrink: 1;}
.shrink3{flex-shrink: 2;}
.shrink4{flex-shrink: 3;}
d. flex-basis
- item이 중심축 방향으로의 기본 크기를 지정하는 속성
- 사용가능한 크기단위는 px, %, vh, vw, em ,,,
<div class="flex-container">
<div class="item item1 basis-150px">item1</div>
<div class="item item2 basis-10">item2</div>
<div class="item item3 basis-25">item3</div>
<div class="item item4 flex1">item4</div>
</div>
/*.css파일 flex-basis 기본크기 지정*/
.basis-150px{flex-basis: 150px;}
.basis-10{flex-basis: 10%;}
.basis-25{flex-basis: 25%;}
/* flex : flex-grow + flex=sgrink + flex-basis 를 합친 속성*/
.flex1{flex: 0 0 100px;}
e. align-self
- 각 item별로 교차측 방향의 개별적인 정렬을 지정하는 속성
<div class="flex-container">
<div class="item item1 self-start">item1</div>
<div class="item item2 self-end">item2</div>
<div class="item item3 self-center">item3</div>
</div>
/*.css파일 align-self : 각아이템은 교차축 기준 정렬 속송*/
.self-start{align-self: flex-start;}
.self-end{align-self: flex-end;}
.self-center{align-self: center;}
