CSS3 Flexbox에 대한 지식을 습득하고 이미지 목록 레이아웃을 쉽게 구현하세요.
현대 웹 개발에서는 아름답고 매력적인 페이지 레이아웃을 디자인하는 것이 중요합니다. CSS3의 Flexbox 레이아웃 모듈은 개발자에게 유연한 레이아웃을 생성할 수 있는 간단하고 강력한 방법을 제공합니다. 이 기사에서는 Flexbox를 사용하여 이미지 목록 레이아웃을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.
먼저 이미지와 해당 HTML 태그를 준비해야 합니다. 표시할 이미지가 다음과 같다고 가정해 보겠습니다.
<div class="image-list"> <img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> <img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> <img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3"> <img src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="Image 4"> <img src="/static/imghwm/default1.png" data-src="image5.jpg" class="lazy" alt="Image 5"> </div>
다음으로 원하는 레이아웃을 얻기 위해 몇 가지 CSS 스타일을 추가해야 합니다. 먼저 외부 컨테이너 요소에 클래스 이름을 추가하고 몇 가지 기본 스타일을 설정합니다.
.image-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}위 코드에서는 display: flex;를 사용하여 컨테이너 요소를 flex 컨테이너로 변환하고 다음을 사용합니다. flex-wrap: Wrap;줄 바꿈을 구현합니다. justify-content: space-between;은 컨테이너 내부의 이미지 요소를 균등하게 배포합니다. display: flex;将容器元素转变为flex容器，并通过flex-wrap: wrap;实现换行。justify-content: space-between;则将图片元素均匀地分布在容器内部。
接下来，我们需要为每张图片元素设置一些样式：
.image-list img {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}以上代码中，我们为图片元素设置了固定的宽度和高度，并使用object-fit: cover;来使图片填充整个容器。通过margin-bottom: 20px;
<!DOCTYPE html>
<html>
<head>
<style>
.image-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image-list img {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="image-list">
<img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1">
<img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2">
<img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3">
<img src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="Image 4">
<img src="/static/imghwm/default1.png" data-src="image5.jpg" class="lazy" alt="Image 5">
</div>
</body>
</html>위 코드에서는 그림 요소의 고정 너비와 높이를 설정하고 object-fit:cover;를 사용하여 이미지가 전체 컨테이너를 채우도록 합니다. 이미지 사이의 간격은 margin-bottom: 20px;을 통해 설정됩니다. 이제 이미지 목록 레이아웃의 기본 스타일이 완성되었습니다. 다음으로 이 코드를 완전한 HTML 파일에 통합하고 효과를 살펴보겠습니다. rrreee
이제 브라우저를 열어 페이지를 보면 이미지가 레이아웃 요구 사항에 따라 표시되고 지능적으로 자동으로 표시되는 것을 확인할 수 있습니다. 다양한 화면 크기에 적응합니다. CSS3의 Flexbox 레이아웃 모듈을 사용하면 다양하고 복잡한 페이지 레이아웃을 쉽게 구현할 수 있습니다. 이 이미지 목록 레이아웃은 사용 사례 중 하나일 뿐입니다. 물론 Flexbox에는 정렬, 정렬, 중첩과 같은 강력한 기능과 속성도 많이 있어 페이지 레이아웃의 유연성과 아름다움을 더욱 향상시킬 수 있습니다. 🎜🎜이 기사가 CSS3의 Flexbox 레이아웃 모듈을 사용하여 빠르게 시작하고 프로젝트에서 뛰어난 페이지 레이아웃을 얻는 데 도움이 되기를 바랍니다. 즐거운 코딩과 디자인을 즐겨보세요! 🎜위 내용은 CSS3의 Flexbox 지식을 익히고 이미지 목록 레이아웃을 쉽게 구현하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱Apr 14, 2025 am 11:20 AM이번 주에 Roundup : Firefox는 Locksmith-Like Powers를 얻는 Samsung '의 Galaxy Store가 프로그레시브 웹 앱을 지원하기 시작하고 CSS Subgrid는 Firefox에서 배송됩니다.
주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한Apr 14, 2025 am 11:15 AM이번 주에 Roundup : Internet Explorer는 Edge로가는 길을 찾고 Google 검색 콘솔은 새로운 속도 보고서를 선전하고 Firefox는 Facebook의 알림을 제공합니다.
CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)Apr 14, 2025 am 11:11 AM당신은 아마도 이미 CSS 변수에 익숙 할 것입니다. 그렇지 않다면 여기 2 초 개요가 있습니다. 실제로 사용자 정의 속성이라고합니다.
우리는 프로그래머입니다Apr 14, 2025 am 11:04 AM웹 사이트 구축은 프로그래밍입니다. HTML 및 CSS 작성은 프로그래밍입니다. 나는 프로그래머이며, 여기에 CSS- 트릭을 읽는다면, 당신은 ' re a입니다.
사이트에서 사용하지 않은 CSS를 어떻게 제거합니까?Apr 14, 2025 am 10:59 AM여기에 내가 당신이 선불 아는 것을 좋아하는 것 : 이것은 어려운 문제입니다. 당신이 여기에 착륙 한 경우, 당신은 당신이 말할 수있는 도구를 가리키기를 희망하기 때문에 여기에 착륙했다면
Picture-in-Picture Web API 소개Apr 14, 2025 am 10:57 AMPicturein-Picture는 2016 년 Macos Sierra의 출시와 함께 Safari 브라우저에서 웹에서 처음으로 등장했습니다. 사용자가 팝 팝이 가능했습니다.
개츠비를 사용하여 흐릿한 효과를위한 이미지를 구성하고 준비하는 방법Apr 14, 2025 am 10:56 AM개츠비는 훌륭한 작업 처리 및 처리 이미지를 수행합니다. 예를 들어, 수동으로 이미지 최적화로 시간을 절약 할 수 있습니다.
오, 패딩 비율은 부모 요소의 너비를 기준으로합니다.Apr 14, 2025 am 10:55 AM나는 오늘 비율 기반 (%) 패딩에 대해 내 머리에 완전히 잘못되었다고 배웠습니다! 나는 항상 백분율 패딩이
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
