목록flex (3)

코딩 슬라임 공방

FLEX 요소 줄어듦 방지

요소 줄어드는 것 방지 flex 사용 시에 flex가 적용된 상자들이 반응형에 따라 크기가 줄어들 때 크기가 줄어들면 안되는 요소들은 flex-shrink : 0을 사용해줘야 한다.
HTML_CSS_JAVA SCRIPT 수업 2020. 7. 9. 01:46
FLEX 안에서 좌우정렬

margin을 사용해서 좌우로 정렬하기 FLEX의 방향이 row일 때 FLEX 요소를 정렬하기 위해서는 justify-content를 사용해서 한쪽 방향으로 정렬할 수 있었다. 하지만 단 하나의 요소만 왼쪽이나 오른쪽으로 따로 정렬하기 위해서는 justify-self를 사용해야한다고 생각 할 수 있지만 justify-self라는 기능은 존재하지 않는다. 그래서 FLEX 요소 중 오른쪽 끝으로 정렬하고 싶은 요소는 margin-left: auto; 를 사용해서 오른쪽 끝으로 정렬 할 수 있고 왼쪽 끝으로 정렬하고 싶은 요소는 margin-right: auto; 를 사용해서 왼쪽 끝으로 정렬 할 수 있다. 이 방법을 사용해서 다양하게 정렬을 할 수 있으니 확인해 보기 바랍니다.
HTML_CSS_JAVA SCRIPT 수업 2020. 7. 7. 03:18
CSS-Flex속성 정리

Flex 속성의 존재 이유 보통의 상황에서 요소(Elements)들의 구조를 만들 때에 수직적인 구조는 만들기가 쉬운 반면에 보통 수평구조를 만드는 속성이 명확하지 않기 때문에 float,inline-block를 사용해서 수평구조를 만들었지만 이러한 방법들은 해결은 가능하지만 여러가지 문제를 가지고 있습니다. (Clear,White-space 등) 하지만 이런 방법들은 차선책일 뿐입니다. 그래서 수평과 수직구조를 편하게 만들기위해서 flex속성을 사용합니다. Flex의 개념 Flex는 Container와 item으로 구성되어 있습니다. 수평,수직구조를 정렬하기 위해서는 정렬되는 item을 담을 수 있는 Container가 필요합니다. 다만, Container와 item에 적용하는 속성이 구분되어 있습니다..
HTML_CSS_JAVA SCRIPT 수업 2020. 5. 1. 17:18
이전 Prev 1 Next 다음