카테고리 없음

웹 5일차

퍼린이 2024. 7. 23. 18:50

2교시 

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

flex box 

 행 또는 열 주축 설정을 해줌 .

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

 

conatiner ( 부모)

레이아웃을 결정할 요소

 

div class a 
    div class b / div

    div class b / div 

/div

 

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

 

display : flex

             컨테이너에 사용

 

flex 축방식

주축 가로형

교차축 새로세로 형

 

주축을 병경도 가능

 

웹 퍼플리셔, 디자인 

가장 중요한 것은 기획

 

코드 가장 중요한 것은 기획

 

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

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

 

블럭 박스 내부 박스들은 width 최대치

 

flex 박스 내부 박스들

 

flex - direction 

주축의 방향성을 결정 

 기본은 row (행)

 

flex - wrap 

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

가능한 영역내에서 벗어나지 않게

여러 행으로 나누어 표현 할 것인지 결정

wrap 

공간이 부족해 지면 

여러 행으로 배치된다

 

flex - flow

direction wrap 을 한번에 사용가능 속성

 

direction wrap 

 

*justify - content

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

 

     flex - start : 기본 

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

        center : 주축의 중심

 

     space-between 

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

     space-around:

     동일 여백 

     space-evenly

     모든 여백 동일 

     align- items

     교차축으로 정렬

     align-self 

    개별요소 (자식)

 

교자축 정렬

wrap 정렬 

 

flex-grow

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

1 0 0 3

145   100  100  235