CSS 101 - 플렉스박스
아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요.
플렉스박스
flexbox는 단일 속성이 아닌 전체 모듈이므로 전체 속성 집합을 포함하여 많은 것을 포함합니다. 그 중 일부는 컨테이너(“플렉스 컨테이너”라고 하는 부모 요소)에 설정되어야 하는 반면 나머지는 자식 요소(“플렉스 항목”이라고 함)에 설정됩니다.
플렉스 컨테이너 속성
다음은 컨테이너에 적용되는 속성 목록입니다.
이것은 플렉스 컨테이너를 정의합니다
.container {
display: flex;
}
플렉스 방향
이 속성은 플렉스 항목이 플렉스 컨테이너에 배치되는 방향을 정의합니다.
.container {
flex-direction: row;
}
플렉스 랩
기본적으로 플렉스 항목은 모두 한 줄에 맞추려고 합니다. 이를 변경하고 이 속성을 사용하여 필요에 따라 항목을 래핑하도록 허용할 수 있습니다. (랩, 노랩, 랩 리버스)
.container {
flex-wrap: wrap;
}
정당화-내용
이는 기본 축을 따라 정렬을 정의합니다. 한 줄의 모든 플렉스 항목이 유연하지 않거나 유연하지만 최대 크기에 도달한 경우 남은 여유 공간을 분산하는 데 도움이 됩니다.
flex-start [- - - ] flex-end [ - - -] center [ - - - ] space-between [- - -] space-around [ - - - ] space-evenly [ - - - ]
.container {
justify-content: flex-start;
}
정렬 항목
현재 줄의 교차 축을 따라 플렉스 아이템이 배치되는 방식에 대한 기본 동작을 정의합니다.
flex-start
[ ----- ]
[ ]
[ ]
flex-end
[ ]
[ ]
[ ----- ]
center
[ ]
[ ----- ]
[ ]
stretch
[ | | | ]
[ | | | ]
[ | | | ]
.container {
align-items: flex-start;
}
플렉스 항목 속성
다음은 개별 항목에 적용되는 속성 목록입니다.
주문하다
기본적으로 플렉스 아이템은 소스 순서대로 배치됩니다. 그러나 order 속성은 플렉스 컨테이너에 나타나는 순서를 제어합니다.
.item {
order: 5;
}
유연한 성장
필요한 경우 플렉스 아이템이 커질 수 있는 능력을 정의합니다.
.item {
flex-grow: 1;
정렬 자체
이렇게 하면 개별 플렉스 항목에 대해 기본 정렬(또는 align-items로 지정된 정렬)을 재정의할 수 있습니다.
예를 들어 align-items가 flex-start로 설정된 경우
[ ----- ]
[ ]
[ ]
Setting .item3 to:
.item3 {
align-self: flex-end;
}
이 맞춤 정렬을 생성합니다.
[ -- -- ]
[ ]
[ _ ]
결론
오늘은 여기까지입니다. 내일도 여행은 계속됩니다. 나중에 뵙겠습니다! 아무것도 놓치지 않으려면 여기 또는 트위터에서 저를 팔로우하세요!
트위터에서 나를 팔로우하세요:
Reference
이 문제에 관하여(CSS 101 - 플렉스박스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ericchapman/css-101-flexbox-3nng텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
