CSS Flexbox를 사용하여 반응형 이미지 갤러리를 만드는 방법

[gyun님]

CSS Flexbox를 사용하여 반응형 이미지 갤러리를 만드는 방법

갤러리는 고품질 이미지 컬렉션을 전시하는 효과적인 방법을 제공합니다. 웹 프로젝트에서 개발자는 이미지 갤러리를 만들어 격자 모양 레이아웃으로 이미지를 표시하므로 사용자가 더 쉽게 찾아볼 수 있습니다.

Flexbox를 사용하여 반응형 이미지 갤러리를 만드는 방법
이러한 유형의 레이아웃을 만드는 방법에는 여러 가지가 있습니다. 이 튜토리얼에서는 CSS 유연한 상자 레이아웃 모듈(flexbox)을 사용하여 모든 장치에서 멋지게 보이는 반응형 이미지 갤러리를 만드는 방법을 다룹니다.

세 가지 예제 프로젝트를 사용하여 Flexbox를 사용하여 다양한 레이아웃을 만드는 방법을 보여 드리겠습니다. 첫 번째와 두 번째 프로젝트는 Flexbox의 장점 중 하나인 CSS 미디어 쿼리를 사용하지 않고 자연스럽게 반응합니다. 그러나 두 번째 및 세 번째 프로젝트에서는 이미지 종횡비를 유지하여 보다 정확한 이미지 미리보기를 제공합니다.

이 튜토리얼이 끝나면 세 가지 유형의 반응형 이미지 갤러리 레이아웃을 설정하기 위해 Flexbox를 적용하는 방법을 이해하게 됩니다.

이 튜토리얼을 따르려면 HTML과 CSS에 대한 기본 지식이 필요합니다.

앞으로 나아가세요:

CSS 가변상자 개요
균일한 이미지 크기로 반응형 이미지 갤러리 만들기
반응형 이미지 갤러리 레이아웃 사용자 정의
마지막 행 정렬
마우스오버 시 오버레이 표시
Flexbox 이미지 오버플로 처리
반응형 이미지 갤러리에서 이미지 종횡비 유지
Flexbox 속성 사용flex-grow
3열 레이아웃에서 이미지 종횡비 유지
CSS Flexbox에 대한 브라우저 지원
점진적인 향상 구현
대체 및 해결 방법 구현
기능 쿼리로 테스트
CSS 가변상자 개요
Flexbox는 한 번에 한 차원(예: 행 또는 열)의 레이아웃을 생성하도록 설계된 모델입니다. Flex 컨테이너 내부의 Flex 항목을 정렬하고 정렬할 수 있는 속성에 대한 액세스를 제공합니다 .

또한 Flexbox는 아래 예제 프로젝트에서 볼 수 있듯이 항목을 여러 줄로 묶어 그리드와 같은 구조를 얻을 수 있습니다.

Flexbox가 항목을 래핑할 때 모든 줄을 Flex 컨테이너의 별도의 Flex 줄로 처리합니다. 따라서 해당 항목의 크기와 해당 플렉스 라인의 사용 가능한 공간을 기준으로 이러한 항목을 정당화합니다. 다음 섹션에서는 사용법을 시작하겠습니다.

균일한 이미지 크기를 갖춘 반응형 이미지 갤러리
첫 번째 프로젝트는 아래와 같이 간단한 레이아웃을 사용합니다.

그리드 레이아웃에 동일한 크기의 9개 이미지를 표시하는 Flexbox 프로젝트 1

이 갤러리 레이아웃은 균일한 이미지 크기에 이상적입니다.

이 첫 번째 Flexbox 프로젝트를 만들려면 HTML 파일을 만들고 다음 마크업을 추가해 보겠습니다.

< div 클래스 = "컨테이너" > <!-- 제목 텍스트 --> < ul class = "image-gallery" < li > < img src = "https://source.unsplash.com/VWcPlbHglYc/640x416" alt = "" /> < div 클래스 = " overlay " > < span > 이미지 제목 </span> </div> </li> < ! -- 여기 에 다른 항목 -- > </ul> </div> 
  
   
         
       
    
    
  
우리는 ul요소를 사용하여 에 있는 이미지 컬렉션을 그룹화했습니다 li. 와 같은 다른 요소를 사용할 수도 있습니다 div. 간결하게 하기 위해 위의 코드 블록은 컨테이너 내의 항목 하나만 표시합니다 ul. CodeSandbox 에서 전체 마크업을 확인하세요 .

모든 li요소에는 이미지 위로 마우스를 가져갈 때마다 오버레이를 표시하는 요소 img와 함께 요소가 포함되어 있습니다. 이 프로젝트에서는 무료 이미지를div 사용 하고 소스 URL에 동일한 크기를 추가하여 동일한 크기의 이미지를 얻습니다.

현재는 스타일이 적용되지 않으므로 이미지는 기본적으로 서로 겹쳐 쌓이게 됩니다.

반응형 이미지 갤러리 레이아웃 사용자 정의
이제 flexbox를 도입하여 이미지를 레이아웃할 수 있습니다. 초점은 ul모든 이미지 항목을 포함하는 래퍼 요소에 있습니다.


20만 명이 넘는 개발자가 LogRocket을 사용하여 더 나은 디지털 경험을 만듭니다.

자세히 알아보기 →
먼저 래퍼 속성을 로 ul설정하여 래퍼를 플렉스 컨테이너로 만들어야 합니다 . 이렇게 하면 직계 자식( 요소)이 플렉스 항목이 됩니다.displayflexli

. 이미지 - 갤러리  { 디스플레이 : 플렉스 ; }
  
이제 모든 플렉스 항목이 즉시 주축에 정렬됩니다. 기본적으로 주 축은 행 차원입니다. 이 동작은 Flexbox가 1차원 레이아웃 모델인 결과입니다.

현재 이미지가 맞지 않기 때문에 뷰포트에서 오버플로됩니다. Flex 컨테이너에 적용된 스타일을 업데이트하고 Flex 항목에도 스타일을 적용하여 이 문제를 해결하겠습니다. CSS를 업데이트하여 다음을 얻습니다.

. 이미지 - 갤러리  { 디스플레이 : 플렉스 ; 플렉스 - 랩 : 랩 ; 정당화 - 내용 : 센터 ; 간격 : 10px ; }
  
  
  
   


. 이미지 - 갤러리  > li { 플렉스 - 기준 : 350px ; /* 너비: 350px; */ }  
    


. 이미지 - 갤러리  li  img  { 개체 - 맞춤 : 표지 ; 최대 - 너비 : 100 % ; 높이 : 자동 ; 수직 - 정렬 : 중간 ; 테두리 - 반경 : 5px ; }
  
   
   
  
   
Flex 컨테이너에 적용되는 스타일을 자세히 살펴보겠습니다.

이 속성은 플렉스 항목이 다른 줄로 넘어가도록 보장합니다.flex-wrap
값이 값인 속성은 주축 의 중심에 항목을 지정합니다.justify-contentcenter
이 gap속성은 행과 열 사이의 간격을 설정합니다(이 경우 10px) .
플렉스 아이템에는 . 모든 플렉스 아이템은 원래 크기에서 늘어나거나 줄어들 수 있습니다. 기본적으로 다음과 같은 선언이 있습니다: , 및 . 즉, 크기가 정의되지 않은 경우 플렉스 항목은 기본 콘텐츠 크기를 사용합니다. 우리의 경우 크기를 . 따라서 개별 항목의 너비 값은 . 기본 증가 및 축소 값을 사용하면 항목이 가변 기반에서 컨테이너에 맞게 축소될 수 있지만 컨테이너에서 확장되지는 않습니다. 아래의 두 번째 프로젝트에서는 Flex 항목을 초기 길이에서 늘리는 방법에 대해 설명합니다.flex-basis: 350px;flex-grow: 0flex-shrink: 1flex-basis: auto350px350px

이미지에 적용한 것은 종횡비를 유지하고 딱 맞게 클립되도록 합니다. 마지막으로 이미지를 추가 하고 반응성이 뛰어나며 확장이 잘 되는지 확인합니다. 대신에 and를 사용할 수도 있습니다 . 결국 레이아웃은 다음과 같습니다.object-fit: cover;max-width: 100%;height: auto;width: 100%;height: 100%;

이미지 정렬이 없는 Flexbox 프로젝트 1의 마지막 행

마지막 행 정렬
위에서 볼 수 있듯이 마지막 행의 항목은 이전 행과 정렬되지 않습니다. 이는 Flexbox의 일반적인 문제입니다.

앞에서 플렉스 항목이 래핑될 때 모든 라인은 새로운 플렉스 라인이 되고 항목은 해당 플렉스 라인의 사용 가능한 공간에 따라 정렬된다고 언급했습니다. 이 경우 Flex 컨테이너에 적용했기 때문에 마지막 행의 항목이 중앙에 배치됩니다.justify-content: center;

빠른 수정은 Flex 컨테이너에 의사 요소를 만드는 데 사용하는 것입니다. 그런 다음 CSS 속성의 크기를 flex 항목의 크기와 동일하게 설정할 수 있습니다 .::afterflex-basis

. 이미지 - 갤러리 :: 이후  { 내용 : "" ; 플렉스 - 기준 : 350px ; }
   
   
이 접근 방식은 잘 작동합니다. 또 다른 접근 방식은 2차원 레이아웃 시스템인 CSS 그리드를 사용하는 것입니다 .

마우스오버 시 오버레이 표시
사용자가 이미지 위로 마우스를 가져갈 때마다 일부 오버레이 텍스트를 표시하고 싶다고 가정해 보겠습니다. 이를 달성하려면 먼저 li다음 스타일 선언을 포함하도록 업데이트하세요.

. 이미지 - 갤러리  > li { /* ... */ 위치 : 상대 ; 커서 : 포인터 ; }  
  
  
  
그런 다음 div에서 의 오버레이 클래스를 대상으로 지정 li하고 다음 스타일 규칙을 적용합니다.

. 오버레이  { 위치 : 절대 ; 너비 : 100 % ; 높이 : 100 % ; 배경 : rgba ( 57 , 57 , 57 , 0.502 ); 상단 : 0 ; 왼쪽 : 0 ; 변환 : 스케일 ( 0 ); 전환 : 모두 0.2초 0.1 초 이즈 인 - 아웃 ; 색상 : #fff ; 테두리 - 반경 : 5px ; /* 중앙 오버레이 텍스트 */ display : flex ; 정렬 - 항목 : 중앙 ; 정당화 - 내용 : 센터 ; }
  
   
   
      
   
   
   
   
   
   
  
  
  
  


/* 호버링 */ . 이미지 - 갤러리 li : hover . 오버레이 { 변환 : 스케일 ( 1 ); }
   
   
이제 프로젝트를 저장하고 테스트하여 예상대로 작동하는지 확인해 보겠습니다.

Flexbox 이미지 오버플로 처리
Flex 속성을 구현하는 초보자가 목격하는 일반적인 문제는 Flex 컨테이너에서 이미지가 오버플로되는 것을 보는 것입니다. 컨테이너의 사용 가능한 크기(예: 너비 또는 높이)가 플렉스 항목을 포함할 수 없는 경우 이미지가 가로 축이나 세로 축에서 오버플로된다는 점을 아는 것이 중요합니다.

이전에는 이미지가 반응하고 컨테이너 내에 포함되도록 를 추가 하여 수평 오버플로를 해결했습니다 . 플렉스 항목인 s에는 기본값이 있으므로 포함된 이미지가 축소된 공간에 맞게 축소될 수 있다는 점을 기억하세요 .max-width: 100%;imgliliflex-shrink: 1

수직 오버플로에서는 Flex 컨테이너와 같이 고정 높이를 추가하는 것을 피해야 합니다 100vh. 그래야 Flex 항목을 포함하기 위해 컨테이너가 작아지지 않습니다.

. image - gallery  { /* ... */ /* 고정 높이를 추가하지 마세요 */ height : 100vh ; }
  
  
   
실제로 이를 확인하려면 ulFlex 컨테이너 요소 뒤에 섹션을 추가하세요.

< div 클래스 = "컨테이너" > <!-- 제목 --> < ul 클래스 = "이미지 갤러리" > <!-- ... --> </ ul > 
  
   
    
  

  < 섹션 > < h2 > 이 또 다른 섹션 </ h2 > </ 섹션 > </ div >
    
  
이 CodeSandbox 에서는 섹션 제목 텍스트가 오버플로로 인해 이미지 갤러리 뒤에 있다는 것을 확인해야 합니다. 이것이 첫 번째 프로젝트의 전부입니다. 여기에서 데모 와 CodeSandbox의 전체 코드를 확인하세요 .

반응형 이미지 갤러리에서 이미지 종횡비 유지
두 번째 및 세 번째 예제 프로젝트에서는 이미지의 가로 세로 비율을 유지하는 레이아웃을 만듭니다.

두 번째 프로젝트의 레이아웃은 아래와 같이 이미지의 종횡비를 유지합니다.

그리드 레이아웃에서 종횡비가 다른 9개의 이미지를 표시하는 Flexbox 프로젝트 2

두 번째 프로젝트의 마크업은 첫 번째 프로젝트의 마크업과 거의 동일합니다. 차이점은 이미지 URL에 고정된 크기를 추가하지 않는다는 것입니다.

< div class = "container" > <!-- 제목 텍스트 --> < ul class = "image-gallery" > < li > < img src = "https://source.unsplash.com/VWcPlbHglYc" alt = " " /> < div 클래스 = " overlay " > < span > 이미지 제목 </span> </div> </li> < !-- 여기 에 다른 항목 -- > </ul> </div> 
  
   
    
         
       
    
    
  
다음으로 CSS 파일에 다음 코드를 추가하여 flexbox 및 정렬 규칙을 소개합니다.

. 이미지 - 갤러리  { 디스플레이 : 플렉스 ; 플렉스 - 랩 : 랩 ; 간격 : 10px ; }
  
  
   


. 이미지 - 갤러리  > li { 높이 : 300px ; 커서 : 포인터 ; 위치 : 상대 ; }  
   
  
  


. 이미지 - 갤러리  li  img  { 개체 - 맞춤 : 표지 ; 너비 : 100 % ; 높이 : 100 % ; 수직 - 정렬 : 중간 ; 테두리 - 반경 : 5px ; }
  
   
   
  
   
이제 위의 규칙을 첫 번째 프로젝트와 비교해 보겠습니다.

width먼저, 플렉스 아이템 에 정의된 대신 li정의된 가 있습니다 height. 또한 항목을 속성 과 정렬하지 않고 에서 a 및 값을 정의했습니다 . 이를 통해 레이아웃은 다음과 같습니다.justify-contentimgwidthheight100%

Flexbox Project 2의 이미지가 정당하지 않고 오른쪽 상단에 공백이 남습니다.

Flexbox 속성 사용flex-grow
이를 통해 Flex 항목을 초기 길이에서 늘리고 사용 가능한 공간을 채워 이미지를 비례적으로 배포할 수 있습니다. 이를 통해 다른 Flex 항목에 비해 항목이 얼마나 커져야 하는지 지정할 수 있습니다.flex-grow

플렉스 항목에 동일한 양수 값을 할당하면 나머지 공간이 플렉스 항목 간에 균등하게 분배됩니다. 다음과 같이 포함하도록 코드를 업데이트해 보겠습니다 .flex-grow: 1;

. 이미지 - 갤러리  > li { flex - 성장 : 1 ; /* ... */ }  
   
  
앞서 언급했듯이 기본 플렉스 항목에는 , 및 의 속성 값이 있습니다 . 이에 상응하는 약어는 다음과 같습니다.flex-grow: 0flex-shrink: 1flex-basis: auto

플렉스 : 0 1 자동 ;   
코드에서 약칭을 사용하려면 다음이 필요합니다.

. 이미지 - 갤러리  > li { flex : 1 1 auto ; /* 또는 flex: auto; */ /* ... */ }  
      
  
auto선언의 값 이 . 따라서 플렉스 항목을 만들 때 기본 콘텐츠 크기(이 경우 이미지 크기)를 사용합니다. 이제 성장할 수도 있고 필요한 경우 축소할 수도 있습니다.flex-basis

이제 Flex 항목이 사용 가능한 공간을 채웠으므로 Flexbox의 마지막 행 정렬 문제가 다시 발생했습니다. 이 경우 마지막 행의 두 항목은 세 개의 열에 해당하는 공간을 채우도록 커집니다.

이 동작을 해결하기 위해 다음과 같이 Flex 컨테이너에서 의사 요소를 다시 한 번 사용합니다 .::after

. 이미지 - 갤러리 :: 이후  { 내용 : "" ; 플렉스 - 성장 : 999 ; }
   
   
우리는 레이아웃에 적합한 출력을 결정하기 위해 값을 가지고 놀 수 있습니다 . 이제 파일을 저장하고 예상대로 작동하는지 확인해 보겠습니다. 이것으로 두 번째 프로젝트가 끝났습니다. 여기에서 데모를 확인 하고 여기에서 전체 코드를 확인하세요 .flex-grow

3열 레이아웃에서 이미지 종횡비 유지
두 번째 프로젝트에서는 미디어 쿼리를 사용하지 않고 이미지 종횡비를 유지하는 반응형 이미지 갤러리 레이아웃을 만드는 방법을 배웠습니다 . 그러나 미디어 쿼리와 함께 Flexbox를 사용하면 이미지 종횡비를 유지하면서 특정 레이아웃을 얻을 수 있습니다.

이를 시연하기 위해 이미지 종횡비를 유지하지만 다음과 같이 3열 레이아웃으로 된 세 번째 반응형 이미지 갤러리 프로젝트를 만듭니다 .

세 개의 열에 배치된 다양한 크기의 이미지를 보여주는 Flexbox Project 3

이 반응형 이미지 갤러리는 큰 화면에 3개의 열을 표시하고 작은 화면에 1개의 열을 표시합니다. 이를 달성하기 위해 다음과 같이 세 개의 요소 열을 포함하는 마크업을 생성합니다.

< div class = "container" > <!-- 제목 텍스트 --> < div class = "image-gallery" > < div class = "column" &; gt ;
      < div 클래스 = "이미지 항목" > < img src = "https://source.unsplash.com/VWcPlbHglYc" alt = "" /> < div 클래스 = "오버레이" > < 스팬 > 이미지 제목 </ 스팬 > </ div > </ div > <!-- 여기에 다른 항목 --> </ div > < div class = "column" > <!-- 여기에 다른 항목 --> </ div > < div class = "column " > <!-- 다른 항목은 여기에 있습니다 --> </ div > </ div > </ div > 
  
   
      
           
         
      
      
    
     
      
    
     
      
    
  
각 열에는 표시하려는 이미지 목록이 포함되어야 합니다. 간결하게 하기 위해 위의 코드 블록은 하나의 이미지만 표시합니다. CodeSandbox 에서 전체 마크업을 확인하세요 .

이 열은 이미지 항목에 대한 플렉스 컨테이너 역할을 합니다. 마찬가지로 열은 래퍼 요소 내의 가변 항목이 됩니다.

이러한 이유로 다음과 같은 스타일 규칙을 적용합니다.

. image - gallery  { /* 모바일 우선 */ display : flex ; 플렉스 - 방향 : 열 ; 간격 : 10px ; }
  
  
  
   


. 이미지 갤러리 . _  열 { 디스플레이 : 플렉스 ; 플렉스 - 방향 : 열 ; 간격 : 10px ; } 
  
  
   


. 이미지 - 항목  img  { 너비 : 100 % ; 테두리 - 반경 : 5px ; 높이 : 100 % ; 개체 - 맞춤 : 덮개 ; }
   
   
   
  


@ 미디어 전용 화면 및 ( 최소 너비 : 768px ) { . 이미지 - 갤러리 { 플렉스 - 방향 : 행 ; } }   
   
    
  
모바일 레이아웃부터 모든 항목이 열로 표시되도록 했습니다. 이전 프로젝트와 달리 기본 행 정렬을 열로 변경하는 속성을 추가했습니다.flex-direction

그런 다음 큰 화면( )의 경우 외부 플렉스 컨테이너의 방향을 행으로 변경했습니다.min-width: 768px

파일을 저장하고 작동하는지 확인해 보겠습니다. CodeSandbox 에서 전체 코드를 확인하세요 .

CSS Flexbox에 대한 브라우저 지원
CSS Flexbox는 최신 브라우저에서 널리 지원되며 IE 10 및 IE 11과 같은 이전 브라우저에서는 부분적으로 지원됩니다. 여기에서 브라우저 지원을 확인하세요 .

브라우저 지원 CSS Flexbox

이러한 광범위한 지원 덕분에 CSS Flexbox는 프로덕션에서 사용할 수 있는 후보가 되었습니다. 위 이미지에 강조 표시된 글로벌 사용 통계에서도 확인할 수 있습니다.

그러나 IE 10 및 IE 11과 같이 지원이 제한적인 브라우저에 대한 대체 기능을 제공하고 싶을 수도 있습니다. 이러한 방식으로 개발 과정에서 점진적인 향상 전략을 배포할 수 있습니다.

점진적인 향상 구현
점진적인 개선을 통해 모든 브라우저에서 작동하는 솔루션을 제공하고 최신 기능을 지원하는 브라우저의 경험을 향상시킵니다. 이 전략을 통해 구형 브라우저 사용자는 최신 기능에 가까운 적절한 경험을 얻을 수 있습니다. 그러나 여기에는 CSS 코드를 조금 더 추가하는 것이 포함되지만 CSS 양이 두 배로 늘어나지는 않습니다.

CSS는 이 전략을 원활하게 사용하여 경험을 향상시키도록 설계되었습니다. 우리는 규칙의 이후 선언이 이전 선언을 덮어쓰는 계단식 원리에 대해 들어봤습니다 . 또 다른 동작은 브라우저가 이해하지 못하는 CSS 속성이나 값을 무시한다는 것입니다. 즉, CSS Flexbox를 지원하지 않는 이전 브라우저는 관련 선언을 무시하고 아래에서 언급할 레거시 기술로 대체됩니다.

대체 및 해결 방법 구현
선언이나 속성 과 같은 CSS 대체 방법을 사용하여 이전 브라우저용 Flexbox와 유사한 레이아웃을 만들 수 있습니다 .display: inline-blockfloat

이 접근 방식은 부동 또는 인라인 블록 항목이 Flex 컨테이너의 하위 항목이 될 때 자동으로 Flex 항목이 되고 초기 동작이 무시되기 때문에 효과적입니다. 그래서 Flexbox 레이아웃을 지원하는 브라우저에서는 최신 기능의 이점을 누리고, 그렇지 않은 경우에는 fallback 방식을 적용하여 사용자가 더욱 가까운 레이아웃 경험을 얻을 수 있습니다.

첫 번째 프로젝트에 대체를 적용하면 코드는 다음과 같아야 합니다.

/* .... */ . 이미지 - 갤러리 { /* 디스플레이: flex; */ 플렉스 - 랩 : 랩 ; 정당화 - 내용 : 센터 ; 간격 : 10px ; /* 위의 플렉스 속성 */
 
  
  
  
   
  

  /* 대체 */ text - align : center ; }
  


. 이미지 - 갤러리  > li { 플렉스 - 기준 : 350px ; /*너비: 350px;*/ 위치 : 상대 ; 커서 : 포인터 ;  
    
  
  

  /* 대체 */ display : inline - block ; 너비 : 350px ; 여백 : 0 5px 10px 5px ; /* 대체 종료 */ } /* .... */
   
   
      
  

코드에서 Flexbox를 지원하지 않는 브라우저를 시뮬레이션하기 위해 선언을 어떻게 제거했는지 확인하세요 . 그렇게 하면 컨테이너와 그 안에 있는 항목은 Flexbox의 모든 이점을 잃게 됩니다.display: flex;

그런 다음 유사한 레이아웃 경험을 생성하기 위해 개별 항목에 대체를 적용했습니다 . 파일을 저장하고 프로젝트를 테스트하면 더 가까운 레이아웃을 갖게 됩니다.display: inline-block;

실제로는 지원되는 브라우저에 대한 더 나은 환경을 제공하기 위해 제거해서는 안 됩니다. 따라서 폴백과 함께 디스플레이 플렉스를 반환하면 폴백으로 포함된 여백으로 인해 항목 사이의 공간이 더 넓어집니다.display: flex;

Flexbox가 지원되는지 감지하여 Flex 항목을 설정하여 추가 공간을 제거함으로써 이 문제를 처리할 수 있습니다. CSS 기능을 감지하기 위해 기능 쿼리를 적용합니다.margin: 0;

기능 쿼리로 테스트
기능 쿼리를 사용하면 규칙을 사용하여 CSS 기능(이 경우 ) 에 대한 브라우저 지원을 테스트할 수 있습니다 . 다음 코드는 브라우저에서 flex 속성이 지원되는지 감지하고 CSS 규칙을 적용합니다.display: flex@supports

@supports (display: flex) {
  .image-gallery > li {
    margin: 0;
  }
}
@supportsCSS 특이성을 변경하지 마십시오 . 따라서 덮어쓰려면 스타일 규칙 뒤에 배치해야 합니다. 우리의 경우에는 다음 규칙 뒤에 배치해야 합니다.

. 이미지 - 갤러리  > li { /* ... */ }  
  
프로젝트를 저장하면 이제 Flex 항목 사이의 예상 여백이 표시됩니다.

대안은 다음과 같이 기능 쿼리에 이전 브라우저에서 지원되지 않는 모든 최신 CSS 기능을 배치하는 것입니다.

@는 ( display : flex ) {를 지원합니다 . 이미지 - 갤러리 { 디스플레이 : 플렉스 ; 플렉스 - 랩 : 랩 ; 정당화 - 내용 : 센터 ; 간격 : 10px ; }  
   
    
    
    
     
  

  . 이미지 - 갤러리  > li { 플렉스 - 기준 : 350px ; /*너비: 350px;*/ 여백 : 0 ; }  
      
     
  

  . 이미지 - 갤러리 :: 이후  { 내용 : "" ; 플렉스 - 기준 : 350px ; } }
     
     
  
CodeSandbox의 CSS 코드 에서는 대체 코드를 @support블록 외부에 배치하고 Flexbox 관련 코드를 블록 내부에 배치했습니다 . 프로젝트를 열고 예상대로 작동하는지 확인합니다.

결론
CSS Flexbox에는 컨테이너의 항목을 래핑, 정렬 및 정렬할 수 있는 가능성이 있습니다. 이렇게 하면 그리드와 같은 구조로 반응형 레이아웃을 만드는 데 편리합니다.

이 튜토리얼에서는 Flexbox를 사용하여 모든 장치에서 멋지게 보이는 세 가지 반응형 이미지 갤러리 프로젝트를 만들었습니다. 또한 이전 브라우저를 사용하는 사용자가 유사한 레이아웃을 경험할 수 있도록 대체 및 해결 방법을 구현하는 방법도 배웠습니다.

질문이나 기여가 있는 경우 댓글 섹션에서 생각을 공유하세요. 이 튜토리얼을 재미있게 읽으셨다면 웹에서 공유해 보세요.

프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?
웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능은 브라우저에서 점점 더 많은 것을 요구합니다. 프로덕션 환경의 모든 사용자에 대해 클라이언트 측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요 .

LogRocket 대시보드 무료 평가판 배너
LogRocket은 웹 앱, 모바일 앱 또는 웹 사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.

웹 및 모바일 앱 디버깅 방법을 현대화하세요. 무료로 모니터링을 시작해 보세요 .

[gyun님]

https://www.youtube.com/watch?v=OTy24oZZykA & https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

[gyun님]

https://blog.logrocket.com/responsive-image-gallery-css-flexbox/