FLEX BOX

FLEX BOX 사용전 확인해야할 사항

 

1.플랙스박스 선언

 

2. 가로 OR 세로정렬

 

 

 

 

 flex-direction : row 일시 2개의 축

(row-reverse 일시 main axis 가<- 방향으로 진행된다 )

 

main axis 방향 정렬 : justift-content

cross axis 방향 정렬 : align-items 또는 align-content

 

 

 flex-direction : colum 일시 2개의 축

 

3. 무조건 한줄안에 정렬 ? 

무조건 한줄안에 정렬 할것인지, 아니면 상황에 따라서 여러줄로 정렬할 것인지 를 결정 하는 요소

 

flex-wrap : nowrap 을 지정할시 , 자식 요소들의 wudth 값을 줄여서 부모 요소 안에 한줄로 row 정렬 시킨다 

---------------------------------------------------------------------------------------------------------------------------------

 

flex-wrap : wrap 을 지정할시 , 자식 요소들의 wudth 값을 유지 하고 부모 width 를 벋어나면 다음줄부터 시작한다. 

 

 

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Flex-box연습

 

 

 

정렬

flex-direction : row;

justify-content : center;

justift-content 는 flex-start ( left 정렬 ) & flex-end ( right 정렬) 설정 가능 

 

 

정렬

flex-direction : row;

justify-content : space-between;  ( 양쪽 정렬)

 

 

정렬

flex-direction : row;

justify-content : space-around;  ( 1000px - 200px x 3 = 400px (여유공간을 6개로 나누어 균등분할)

 

 

정렬

flex-direction : row;

justify-content : flex-start;

align-items : center;

 

parent box , height : 1000px 

 

 

정렬

flex-direction : row;

justify-content : flex-start;

align-items : center;

flex-wrap : wrap;

 

정렬

flex-direction : row;

justify-content : flex-start;

align-content : center;

flex-wrap : wrap;