(HTML,CSS) FLEX BOX
Flex는 레이아웃 배치 전용 기능으로 생성된 기능으로써 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3 레이아웃방식이라고한다.
기본적으로
container , item으로 레이아웃을 배치하고 그림으로보면
| flex container 속성 | |
| flex-direction | flex item의 주축을 정함 ->(방향) 혹은 <-(방향) |
| flex-wrap | 여러줄을 묶음(줄바꿈) |
| justify-content | 주축의 정렬방법을 정함 |
| align-items | 교차축에서 item의 정렬방법을 정함 (1줄) |
| align-content | 교차축의 정렬방법을 정함 (2줄이상) |
| display:flex and inline-flex | 해당태그를 container로 지정해줌 |
| flex-flow | 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음 |
| display속성 | |
| flex | block 특성의 container |
| inline-flex | inline 특성의 container |
flex와 inline-flex는 차이는
그림으로보기 편하게
설명하면
flex는 block 요소를 가지며,
inline-flex로 지정된 Container는 Inline 요소를 가진다.(item에는 영향을 주지않음 )
| item 속성 | |
| flex | Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다. |
| flex-grow | |
| flex-shrink | |
| flex-basis | |
| order | Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다. 음수가 허용됩니다. |
| row | Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 (기본값이다) |
| row-reverse | Items를 row의 반대 축으로 표시 |
| column | Items를 수직축(위에서 아래로)으로 표시 |
| column-reverse | Items를 column의 반대 축으로 표시 |
설명부분
flex-direction
기본인 row는 생략하고
row-reverse
.container{
display: inline-flex;
border: 1px solid black;
height: 300px;
flex-direction:row-reverse
}
column
.container{
display: inline-flex;
border: 1px solid black;
height: 300px;
flex-direction:column;
}
column-reverse
.container{
display: inline-flex;
border: 1px solid black;
height: 300px;
flex-direction:column-reverse;
}
잠깐!!! 여기서 row 를 사용하면 주축은 가로(왼쪽,오른쪽) 가 되고 colum을 사용하면 주축은 세로(위,아래)가 된다.
즉내가 row 와 colum을 주었느냐에따라 수평, 수직의 기준이 달라진다 참고!!
flex-wrap
Items의 여러 줄 묶음(줄바꿈을 설정).
기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다 그러므로 flex-wrap을이용하여 줄바꿈을 해준다.
nowrap
wrap의 기본값으로
모든 Itmes를 여러 줄로 묶지 않음
.container{
display:flex;
border: 1px solid black;
width:40%;
flex-wrap:nowrap;
}
wrap
.container{
display:flex;
border: 1px solid black;
width:40%;
flex-wrap:wrap;
}
wrap-reverse
.container{
display:flex;
border: 1px solid black;
width:40%;
flex-wrap:wrap-reverse;
}
flex-flow
flex-direction,flex-wrap 두가지의 단축속성으로 두가지의 기능을 전부 사용가능하다
.container{
display:flex;
border: 1px solid black;
width:40%;
flex-flow:wrap-reverse row-reverse;
}두가지의 기능을 알면 flow를 사용하면 되겠다.
justify-content
주 축의 정렬 방법을 설정한다.
| flex-start | Items 시작점(flex-start)으로 정렬 |
| flex-end | Items 끝점(flex-end)으로 정렬 |
| center | Items 가운데 정렬 |
| space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬 |
| space-around | Items를 여백을 포함하여 정렬 |
flex-start
.container{
display:flex;
border: 1px solid black;
width:40%;
justify-content:flex-start;
}기본값으로 앞서출력한 왼쪽기준으로 붙여서 출력
flex-end
.container{
display:flex;
border: 1px solid black;
width:40%;
justify-content:flex-end
}
center
.container{
display:flex;
border: 1px solid black;
width:40%;
justify-content:center;
}
space-between
.container{
display:flex;
border: 1px solid black;
width:40%;
justify-content:space-between;
}
space-around
.container{
display:flex;
border: 1px solid black;
width:40%;
justify-content:space-around;
}
align-content
교차 축(cross-axis)의 정렬 방법을 설정한다 (이기능은 item영역이 2줄이상이고 여백이 있을 경우만 사용할 수 있다!!)
| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 |
| flex-start | Items를 시작점(flex-start)으로 정렬 |
| flex-end | Items를 끝점(flex-end)으로 정렬 |
| center | Items를 가운데 정렬 |
| space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 |
| space-around | Items를 균등한 여백을 포함하여 정렬 |
stretch
.container{
display:flex;
border: 1px solid black;
width:20%;
flex-flow: wrap;
align-content: stretch;
}
flex-start
.container{
display:flex;
border: 1px solid black;
width:20%;
flex-flow: wrap;
align-content: flex-start;
}
flex-end
.container{
display:flex;
border: 1px solid black;
width:20%;
flex-flow: wrap;
align-content: flex-end;
}
center
.container{
display:flex;
border: 1px solid black;
width:20%;
flex-flow: wrap;
align-content: center;
}
space-between
.container{
display:flex;
border: 1px solid black;
width:20%;
height:500px;
flex-flow: wrap;
align-content: space-between;
}
space-around
.container{
display:flex;
border: 1px solid black;
width:20%;
height:500px;
flex-flow: wrap;
align-content: space-around;
}
align-items
교차 축(cross-axis)의 정렬 방법을 설정한다(이기능은 1줄일때 사용한다)
Items가 flex-wrap을 통해 여러줄로 되어있을 경우에는 align-content 기능이 우선순위가 된다.
align-items사용시에는 align-content 속성을 기본값(stretch)으로 설정해야 한다.(선언을 하지않거나 stretch로 선언 해야함 )
| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 |
| flex-start | Items를 각 줄의 시작점(flex-start)으로 정렬 |
| flex-end | Items를 각 줄의 끝점(flex-end)으로 정렬 |
| center | Items를 가운데 정렬 |
| baseline | Items를 문자 기준선에 정렬 |
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:stretch;
}
stretch
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:stretch;
}
flex-start
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:flex-start;
}
flex-end
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:flex-end;
}
center
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:center;
}
baseline
.container{
display:flex;
border: 1px solid black;
height:100px;
flex-flow: wrap;
align-items:baseline;
}
ITEM 속성
| order | Flex Item의 순서를 설정 |
| flex | flex-grow, flex-shrink, flex-basis의 단축 속성 |
| flex-grow | Flex Item의 증가 너비 비율을 설정 |
| flex-shrink | Flex Item의 감소 너비 비율을 설정 |
| flex-basis | Flex Item의 (공간 배분 전) 기본 너비 설정 |
| align-self | 교차 축(cross-axis)에서 Item의 정렬 방법을 설정 |
order
<div class="container">
<div class="box" style="order:3; color:red">item영역1(order로 세번째 순서로지정함)</div>
<div class="box"style="order:2;">item영역2</div>
<div class="box"style="order:1; color:red">item영역3(order로 첫번째 순서로지정함)</div>
flex
flex: 1 3 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 3; /* 증가너비 감소너비 */
flex: 3 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용) */위형식으로 사용하거나
.box{
border: 1px solid black;
flex-grow :1; /* Item의 증가 너비 비율을 설정 */
flex-shrink :5;/* Item의 감소 너비 비율을 설정 */
flex-basis :12px; /* Item의 (공간 배분 전) 기본 너비 설정 */
}아래형식처럼 1개씩지정하여 사용가능하다
주의
flex-grow 의 기본값은 0
flex-shrink의 기본값은 1
flex-basis의 기본값은 auto이다.
flex: 1;은 flex-grow: 1; 와동일하다 그럼 flex-shrink: 1 flex-basis: auto;는자동적으로 적용이되는것이다.
하지만 flex: 1 1;는 flex 1 1 auto; 가되지않고 flex 1 1 0;으로 설정된다. grow와 shrink을 입력후 basis를 생략하면
basis는 0의값이 들어가므로 주의하자
flex-grow
Item의 증가 너비 비율을 설정
숫자가 크면 더 많은 너비를 가진다 값이 0일 경우 효과적용되지않는다.
<div class="container">
<div class="box" style="flex-grow:0;">item영역1</div>
<div class="box" style="flex-grow:1; ">item영역2</div>
<div class="box" style="flex-grow:5; ">item영역3</div>
</div>
flex-shrink
Item의 감소 너비 비율을 설정
숫자가 크면 더 많은 너비를 가진다 값이 0일 경우 효과적용되지않는다.
(위기능은 추후 추가 설명)
flex-basis
Item의 (공간 배분 전) 기본 너비를 설정한다.