웹1 9일차 - 마켓컬리3

[🐟display: flex; 🐟 ]

 

{flex를 가진 box}

 

[flex-container]

flex를 적용한 태그는 flex-container라고 부른다. 

 

-item을 정렬하는 코드는 전부 flex-container에 작성된다. 

ㄴ justify-content: 가로 정렬

ㄴ align-items: 세로 정렬

ㄴ flex-direction: 정렬 방향

ㄴ flex-wrap: 줄바꿈 정렬(반응형)

ㄴ align-content: 줄바꿈 되었을 때 정렬(반응형)

-브라우저에서 도형취급 받는다. margin-left: auto;와 margin-right: auto;로 중앙 정렬한다.

-width: auto;일 때 100%로 작동한다. 

 

[flex-item]

flex를 적용한 태그의 자식 태그는 flex-item이라고 부른다. 

 

-width: auto;일 때 0으로 작동한다. 

-height: auto;일 때 100%으로 작동한다. 

-text-align으로 정렬할 수 없다. 

-flex-item의 크기를 직접적으로 커스텀하는 속성은 flex-item에 직접 적용한다. 

ㄴ flex-grow: 비율

ㄴ flex-basis: 비율 설정

ㄴ flex-shrink: 고정 설정

-align-items가 적용된 flex-item은 height: auto일 때 0으로 작동된다. 

 

 

{flex란?}

display의 속성값 flex는 한 줄에 여러 개의 요소, 가로 중앙정렬, 세로 중앙정렬, 반응형 레이아웃, 줄바꿈 등...의 여러가지 기능들을 어렵지 않게 사용할 수 있는 속성값이다.

  

쉽게 말해 하위 요소에 '유연함'을 준다고 말할 수 있다. 

즉, 어떠한 요소를 직접 움직이고 싶다면 그 요소를 flex-item으로 만들어야 한다. 

 

그렇게 받은 '유연함'으로 하위 요소의 크기가 고정형이어도 경우에 따라 반응형으로 적용되어 크기가 줄어들기도 한다.

자세한 특징은 아래에서 확인해보자. 

 

 

{flex 특징}

1. flex-item은 flex-container의 높이를 상속 받는다. 

    즉, flex-item의 높이가 auto일 때 100%로 작동한다. 

2. flex-item은 정해진 넓이값이 있어도, 공간이 부족하면 유연하게 줄어든다. 

3. 2번 특징의 연장선으로, flex-container가 %또는 body의 넓이를 상속 받았을 때 flex-item은 고정 px로 되어있어도 반응형이다. 

    즉, 화면이 작아져도 잘리지 않고 같이 줄어든다.  

 

 

{flex 주의!}

flex-container안에 여러 개의 flex-item이 있고 그중에 하나만 높이를 정해주면 모든 flex-item이 그 높이를 따라간다. 

왜냐? 높이 상속의 순서를 살펴보자.

1) flex-item-5의 높이는 100px  -->  기본값이 하위요소를 따라가는 flex-container의 높이가 100px로 자동 변경

2) 나머지 flex-item들의 높이는 상위 엘리먼트인 flex-container의 높이 100px를 따라감

3) 결과적으로 모두가 100px의 높이를 가지게 된다. 

 

 

{flex-item의 정렬}

flex-item을 정렬할 때는 flex-direction의 정렬 방향에 따라 같은 속성의 속성값이라도 정렬 방향이 가로/세로로 바뀐다. 아래의 속성을 flex-container에게 적용해야 한다. 

 

[flex-direction] 방향

(row)         justify-content: 가로 정렬

                 align-items: 세로 정렬

                 flex-grow: 비율, 가로에서 작동

(column)   justify-content: 세로 정렬

                 align-items: 가로 정렬

                 flex-grow: 비율, 세로에서 작동

 

 

(flex-item) auto

( align-items O )    ( align-items X )

height: auto = 0       height: auto = 100%   

 

flex-container의 높이 = flex-item의 높이

ㄴ(문제점) 높이가 같아서 정렬할 수 없다. 

ㄴ(해결) flex-container가 강제로 flex-item 높이를 작게 만들어서 원하는 위치로 정렬시킨다. 

 

기본값으로 flex-container와 높이가 같아져있는 flex-item

flex-container에 align-items가 적용되어 있을 때 자동으로 높이가 0이 되어 중앙 정렬이 되는 flex-item.

 

 

 

 

[flexbox froggy 하면서 궁금한 속성의 개념]  

justify-content: space-around; : flex-item들의 둘레(around)에 균일한 간격을 만들어 준다.

 

justify-content: space-between; : flex-item들의 사이(between)에 균일한 간격을 만들어 준다.  

 

flex-wrap: 줄바꿈 정렬

ㄴ nowrap: 모든 요소를 한 줄에 정렬

ㄴ wrap: 요소들을 여러 줄에 걸쳐 정렬

ㄴ wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬 

 

flex-flow: flex-direction의 속성과 flex-wrap의 속성을 합쳐 놓은 약식 속성

마치 margin-4direction을 margin으로 합쳐놓은 듯한 느낌.

 

align-content: flex-wrap의 동작을 변경할 수 있다. align-items와 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을  정렬한다. 

 

 

 

 

 

 

---

 

 

**css 꿀팁

구글 아이콘은 기본적으로 적용되는 line-height가 있다. 

기본 css의 값 아래에 추가적으로 line-height를 정해주면 조절할 수 있다.