CSS 플렉스 반응형
반응형 플렉스박스
CSS 미디어 쿼리 장에서 미디어 쿼리를 사용하여 다양한 화면 크기와 장치에 대해 다른 레이아웃을 만들 수 있다는 것을 배웠습니다 .
노트북 및 데스크탑:
1
2
삼
휴대 및 태블릿:
1
2
삼
예를 들어, 대부분의 화면 크기에 대해 2열 레이아웃을 만들고 작은 화면 크기(예: 휴대폰 및 태블릿)에 대해 1열 레이아웃을 생성하려는 경우 flex-direction특정 row중단 column
점(800px에서 아래 예):
예시
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
또 다른 방법은 플렉스 항목의 속성 백분율을 변경하여 flex다양한 화면 크기에 대해 다른 레이아웃을 만드는 것입니다. flex-wrap: wrap;이 예제가 작동하려면 플렉스 컨테이너 에도 포함 해야 합니다.
예시
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Flexbox를 사용한 반응형 이미지 갤러리
flexbox를 사용하여 화면 크기에 따라 4개, 2개 또는 전체 너비 이미지 사이에서 다양한 반응형 이미지 갤러리를 만듭니다.
Flexbox를 이용한 반응형 웹사이트
flexbox를 사용하여 유연한 탐색 모음과 유연한 콘텐츠가 포함된 반응형 웹사이트를 만드세요.