[HTML & CSS ] Flex(1)

[flex]

• 설명에 앞서 flex 관련한 기본적인 html 구조는 flex-container 아래 flex-item가 있는 구조로 생각하면 된다.

<div class="flex-container">
    <div class="flex-item flex-item-1"></div>
    <div class="flex-item flex-item-2"></div>
</div>

 

[flex-direction]

• flex-item에는 flex-direction이라는 속성이 기본적으로 들어있다.
• flex-direction은 flex-item의 방향을 설정(정렬)할 수 있는 속성이다.
• 정렬과 관련된 flex 속성은 flex-item이 아닌 flex-container에서 코드를 추가해야 적용된다.
• flex-direction의 기본값은 한 줄에 나란히 배열되는 row가 있다.
• 특정한 상황에서는 row값을 column값으로 바꿔 사용하는 경우도 있다.
• column은 flex-item을 한 줄에 하나씩 배열시키는 속성값이다.

 

[flex-shrink]

• flex-item에는 flex-shrink라는 속성이 기본적으로 들어있다.
• flex-shrink는 유연함을 커스텀할 수 있는 속성이고, 기본값으로는 1이 들어가있다.
• flex-shrink: 1;이라는 코드는 flex-item이 줄어들면 줄어들수록 유연하게 사용하겠다는 의미이다.
• flex-shrink: 0;이라는 코드는 flex-item에 적용된 px값대로 유지하겠다는 의미이다.
• 쉽게 말해, 값이 1이면 너비높이를 고정픽셀로 지정해도 반응형처럼 유연하게 사이즈가 줄어드는 속성을 가지고 있고, 값이 0이면 너비높이가 지정된 픽셀만큼 고정된다는 뜻이다.

[flex-wrap]

• flex-item에는 flex-wrap이라는 속성이 기본적으로 들어있다.
• flex-wrap은 flex-item 줄바꿈에 관련된 속성이며, 기본값으로는 nowrap이 들어가있다.
• 줄바꿈과 관련된 flex 속성은 flex-item이 아닌 flex-container에서 코드를 추가해야 적용된다.
• flex-wrap: nowrap;이라는 코드는 어떤 상황이 와도 flex-item을 줄바꿈하지 않겠다는 의미이다.
• flex-wrap: wrap;이라는 코드는 특정한 조건에 맞아 떨어진다면 flex-item을 줄바꿈하겠다는 의미이다.

See the Pen flex 시작 by psm817 (@psm817) on CodePen.

 

 

[flex-item 높이상속]

[align-items]

• flex-item의 세로정렬에 관련된 속성이다.
• align-items의 기본값으로는 stretch라는 속성값이 들어가있다.
• stretch라는 속성값은 flex-item이 height: auto; 일 때만 작동한다. (상위 엘리먼트 높이를 상속받는 속성값 정도로 이해하면 좋다.)
• stretch라는 속성값은 기본값이기 때문에 flex-start, center, flex-end 등 다른 속성값으로 커스텀되면 높이는 더이상 작동(상속)되지 않는다.
• align-items: stretch; 이면 height: auto일 때 높이를 100% 상속받는다.
• align-itmes: 다른 속성값; 이면 height: auto 일 때 높이는 0이다.
• stretch라는 속성값은 상위 엘리먼트의 높이를 하위 엘리먼트가 100% 상속받기 때문에 정렬이 불가능하다.
• 상위 엘리먼트와 하위 엘리먼트 크기가 같으면 정렬할 수 없기 때문에 flex-item에 높이를 강제적으로 작게 만들어서(stretch 외에 다른 속성값을 넣어) 원하는 위치에 배치한다.

 

[flex-item의 역할을 하는 태그의 특징]

• width: auto일 때, 0으로 작동한다.
• height: auto일 때, 0으로 작동한다.
• 너비에 관련된 속성은 flex-item에서 각각 적용하여 사용한다.
• 너비에 관련된 속성의 예는 flex-shrink, flex-grow, flex-basis가 있을 수 있다.

 

[flex-container의 역할을 하는 태그의 특징]

• flex-container의 높이 상속 조건은 align-items: stretch; 와 height: auto;를 모두 만족할 때다.
• flex-container가 주체(관리자), flex-item은 수행자이다.
• 정렬과 줄바꿈은 주체가 명령을 내리는 것이기 때문에 align-items과 같은 정렬은 flex-container에서 작성한다.
• 다시 말해, flex-item의 줄바꿈이나 정렬에 관련된 코드는 flex-containter에서 사용한다.
• 쉽게 예를 들면 게임에서 사용자가 아이템을 구매하고 아이템을 이용하는 것처럼, 주체인 flex-container가 flex-item을 만들어내고 이용한다고 생각하면 편하다.

See the Pen flex-item 높이상속 by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 13일차 복습 by psm817 (@psm817) on CodePen.