웹 _ 005일차

alt + shift + ↓ : 윗줄 복제

 

flex box

행 또는 열 주축 설정을 해준다.

웹 요소를 배치 정렬하는 1차원 레이아웃 방식

 

flex container (부모)

레이아웃을 결정할 요소

div class a

      div class b /div

      div class b /div

/div

flex item (flex 컨테이너 안에 있는 박스)(자식)

display : flex

컨테이너에 사용

 

flex축방식

주축 가로 형

교차축 세로 형

 

추축을 변경도 가능

 

웹퍼블리셔, 디자인, 가장 중요한 것은 기획

코드 가장 중요한 것은 기획

 

코드는 자신이 편하게 사용하시면 되고

그것에 대해서 Css에서 다 구현될 수 있도록 만들어 놓았다.

 

display;flex가 있을 때

display;flex가 없을 때

 

박스 내부 박스들은 width 최대치를 가지고 있고

flex 박스 내부 박스들은 height 최대치를 가지고 있다

 

flex-direction

주축의 방향성을 결정

 

기본은 row (행↔열(column))

 

flex-direction: row-reverse를 적용한 모습

flex-direction: colume(열)를 적용한 모습

 

flex-direction: colume-reverse를 적용한 모습

flex-wrap

item들이 강제로 한줄에 배치할 것인지

가능한 영역 내에서 벗어나지 않게 여러 행으로 나누어 표현할 것인지를 결정

 

기본값은 nowrap

공간이 부족해도 한줄배치

 

wrap

공간이 부족해지면 여러 행으로 배치된다.

 

flex-flow

direction wrap을 한번에 사용할 수 있는 속성

 

justify-contents

박스들이 주축을 따라 배치될 때 요소 사이의 공간 분배

(display가 flex일 때 justify-contents를 사용할 수 있다.)

 

flex-start : 기본

flex-end : 주축의 끝점으로부터 시작점을 향해

center : 주축의 중심

 

space-between : 

주축에 양끝 배치 내부간격 동일

space-around : 

동일 여백

space-evenly : 

모든 여백 동일

 

align-items

교차축으로 정렬

align-self

개별요소(자식)

align-content

교차축 정렬

warp정렬

evenly : 고르게

flex-grow

flex item이 기본 크기에 대해서 더 커질 수 있다

 

플렉스는 좌우다

일반 컨텐츠는 상하로 나온다

구성에 있어서는 내새끼를 보여준다

 

1 0 0 3

flex-grow

flex-shrink

 

box에 margin : 0 auto 를 적용한 화면

box에 margin-left : auto 를 적용한 화면

 

box3에만 aline-self : center를 적용한 모습

 

박스 1,4 는 컨텐츠 밖에 있고 너비값을 줬고 / 박스 2,3은 컨텐츠 안에 있다