flex는 display의 속성 값 중 하나이며
세로 레이아웃을 잡기편하게 도와준다
<body>
<h1>CSS flex</h1>
<div class="container">
<div class="item">AAA</div>
<div class="item">B</div>
<div class="item">CCCCCC</div>
<div class="item">DDD</div>
<div class="item">E</div>
</div>
기본 디자인 css는 생략
flex를 이용하기위해 display에 속성값을 줌
컨테이너에 flex를 주고 요소들을 배치하는 설정을한다
display{
display : flex;
}
flex-direction : ;축의 방향을 설정하는 속성
row : 행의 축을 기준으로 요소들을 나열
column : 열의 축을 기준으로 요소들을 나열
justify-content: ;수평 정렬을 설정하는 속성
flex-start : 축의 시작을 기준으로 정렬
flex-end : 축의 마지막을 기준으로 정렬
center : 축의 중앙을 기준으로 정렬
space-around : 요소들만의 간격을 정렬
space-between : 요소들을 축 양 옆으로 붙인 후 간격 정렬
space-evenly : 빈공간이 모두 고르게 정렬
align-items: ;수직으로 정렬,크기를 설정하는 속성
strech : 기본 값 수직 위아래로 꽉 차게 만들어준다
flex-start :
- flex-direction 값이 row일 경우
요소들이 위로 붙는다 - flex-direction 값이 column일 경우
요소들이 왼쪽으로 붙는다
flex-end :
- flex-direction 값이 row일 경우
요소들이 아래로 붙는다 - flex-direction 값이 column일 경우
요소들이 오른쪽으로 붙는다
center : 중앙 정렬
아래는 요소들에게 주는 설정값
flex-grow: 1;요소들이 꽉 차게하고 커질 때의 비율을 정함
요소 각각에 설정해주지 않으면 모두 동일한 비율을 가짐
flex-shrink: 1;요소들을 꽉 차게하고 작아질 때의 비율을 정함
요소 각각에 설정해주지 않으면 모두 동일한 비율을 가짐
flex-basis: 0;요소들의 컨텐츠에 여백을 얼마나 포함해서 비율을 정할것인지 정하는 설정
디폴트값 auto일시 여백만의 비율
0일시 컨텐츠와 여백을 포함해서 동일한 비율
위 3가지는
flex : 1;로 축약해서 사용 가능
