[html] 개념 학습 <Flexbox>

 

 

 

 

 

 

Flexbox로 레이아웃 잡기

 

박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

display: flex : css 속성

 

 

index.html

 

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

 

index.css

 

 

main {
    border: 1px dotted red;
  }
  
  div {
    border: 1px solid green;
  }
  
  * {
    margin: 10px;
    padding: 10px;
  }

 

 

 

 

부모 요소인 <main> 요소에 display: flex 속성을 적용

 

 

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

 

 

 

 

 

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

 

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

→ 자식 요소들을 정렬하는 정렬 축을 정한다(아무 설정 x → 가로 정렬)

 

 

main {
	display: flex;
	**flex-direction : row;**
}

 

 

*********************************************************************************************************

 

 

 

 

*********************************************************************************************************

 

 

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

 

 

main {
	display: flex;
	**flex-wrap : nowrap;**
}

 

 

 

 

 

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

 

row(기본 값) → 가로 수평 방향 , column → 세로 수평 방향

주요 속성 값 : flex-start, flex-end, center, space-between, space-around

 

 

 

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

 

row(기본 값) → 가로 수직 방향 , column → 세로 수직 방향

주요 속성 값 : stretch , flex-start , flex-end, center , baseline

 

 

 

 

자식 요소에 적용해야 하는 Flexbox 속성

 

flex 속성의 값

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

 

 

flex: 0 1 auto; // 기본값
flex-grow: 0;
flex-shrink: 1; // flex-grow와 함께 쓰는 것은 권장 x
flex-basis: auto; // flex 0이여야만 auto 가능