찾다

집  >  기사  >  웹 프론트엔드  >  CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

青灯夜游
青灯夜游앞으로
2021-09-26 10:58:144923검색

CSS로 폭포 흐름을 구현하는 방법은 무엇입니까? 다음 기사에서는 CSS를 사용하여 폭포 흐름을 구현하는 두 가지 방법을 소개합니다. 이것이 도움이 되기를 바랍니다.

CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

폭포 흐름 레이아웃이라고도 알려진 폭포 흐름은 인기 있는 웹 사이트 페이지 레이아웃 방법입니다. 휴대폰에서 여러 장의 사진을 표시할 때 자주 사용됩니다. 즉, 너비가 동일한 요소의 여러 행이 배열되고, 너비가 동일하고 높이가 다른 요소가 순서대로 추가됩니다. 너비가 요구 사항에 도달할 때까지 그림의 원래 비율에 따라 크기가 조정됩니다. 규칙에 따라 지정된 위치에 배치됩니다.

그러면 폭포 흐름 레이아웃의 구현 방법은 무엇입니까?

column 폭포 흐름 구현을 위한 여러 줄 레이아웃column 多行布局实现瀑布流

column 实现瀑布流主要依赖两个属性。

column-count 属性，是控制屏幕分为多少列。

column-gap 属性，是控制列与列之间的距离。

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-column</title>
  <style>
    .box {
          margin: 10px;
          column-count: 3;
          column-gap: 10px;
      }
      .item {
          margin-bottom: 10px;
      }
      .item img{
          width: 100%;
          height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
  </div>
</body>
</html>

CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局

flex-flow:column wrap 使其纵向排列并且换行换行

设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。

每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin

column 폭포 흐름 구현은 주로 두 가지 속성에 의존합니다.

column-count 속성은 화면을 몇 개의 열로 나눌 것인지를 제어합니다. CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

column-gap 속성은 열 사이의 거리를 제어합니다. 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
        display: flex;  
        flex-flow: column wrap;
        height: 100vh;
      }
      .item {
        margin: 10px;
        width: calc(100%/3 - 20px);
      }
      .item img{
        width: 100%;
        height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
  </div>
</body>
</html>
CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법

flex 폭포 흐름을 구현하는 유연한 레이아웃

flex 폭포 흐름을 구현하려면 가장 바깥쪽을 설정해야 합니다. 요소를 display: flex로 설정하려면 유연한 레이아웃을 사용하세요

flex-flow:column Wrap을 사용하여 세로로 정렬하고 새 줄로 묶으세요

높이: 100vh 설정 화면 채우기 높이를 px 단위의 높이로 설정하여 하위 요소를 수용할 수도 있습니다. 각 열의 너비는 calc 함수, 즉 width: calc(100%/3 - 20px)로 설정할 수 있습니다. 동일한 너비에서 여백 거리를 뺀 3 열을 왼쪽과 오른쪽에서 두 번 나눕니다.

🎜rrreee🎜표시 효과는 다음과 같습니다🎜🎜🎜🎜🎜🎜케이스 코드🎜🎜🎜폭포 흐름 구현 코드: https://gitee.com/yunxii/css-demo/tree/master/waterfall🎜🎜🎜원본 주소 : https: //juejin.cn/post/7011333433318178846🎜🎜저자: tangxd3🎜🎜🎜더 많은 프로그래밍 관련 지식을 보시려면 🎜프로그래밍 영상🎜을 방문해 주세요! ! 🎜

위 내용은 CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css count display margin column flex https gitee
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：스타일 코드를 더욱 간결하게 만들기 위해 CSS의 :is() 및 :where()에 대해 자세히 알아보세요!다음 기사：스타일 코드를 더욱 간결하게 만들기 위해 CSS의 :is() 및 :where()에 대해 자세히 알아보세요!

관련 기사

더보기