Flexbox 布局下实现响应式可展开幻灯片-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及，响应式设计已经成为了现代 Web 开发的必备技能，也让开发者面临了更多的挑战。在这篇文章中，我们将讨论如何利用 Flexbox 布局实现一个响应式可展开幻灯片，让你的网站在不同设备上都能够实现最佳的用户体验。

什么是 Flexbox？

Flexbox 是一个弹性盒子布局模型，允许开发者将容器的子元素排列在任何方向、任何间距和任何顺序上。Flexbox 布局最大的特点就是它的自适应性能，能够适应动态的布局和不同设备屏幕尺寸。因此，使用 Flexbox 正确地布局可以让你的网站兼容多个设备和不同分辨率，提高用户的体验效果。

实现 Flexbox 布局下的响应式幻灯片

接下来，我们将利用 Flexbox 布局创建一个响应式的可展开幻灯片。首先，我们需要创建一个有序列表（ol）元素，其中每个列表项（li）代表一个幻灯片。然后，每个列表项再包含一个标题元素（h2）和一个正文内容元素（p）。

// www.javascriptcn.com code example
<ol class="slider">
  <li>
    <h2>Slide 1</h2>
    <p>Content for slide 1.</p>
  </li>
  <li>
    <h2>Slide 2</h2>
    <p>Content for slide 2.</p>
  </li>
  <li>
    <h2>Slide 3</h2>
    <p>Content for slide 3.</p>
  </li>
</ol>

接下来，我们需要使用 Flexbox 布局来排列这些幻灯片。我们将使用以下 CSS 样式：

// www.javascriptcn.com code example
.slider {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  list-style: none;
}

.slider li {
  flex: 0 0 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.slider li.open {
  max-height: 100vh;
}

让我们来解释一下这些 CSS 样式。

父元素（.slider）需要设置为 flex 布局，并使用 column 方向布局。将 flex-wrap 设置为 nowrap 以确保所有的子元素排在同一行上。
我们想要让幻灯片的标题和内容都垂直居中，并水平居中对齐。我们可以使用 justify-content 和 align-items 属性来实现这一点。
子元素（li）需要设置为 flex 布局，并使用 flex 属性将它们的宽度设置为 100%。
为了使幻灯片在页面上不可见（而是在视口外），我们将 max-height 属性设置为 0，将 overflow 属性设置为 hidden。
当幻灯片需要展开时，我们将 li 的类名设置为 open，同时将 max-height 属性设置为视口高度（100vh），以展开幻灯片内容。

最后，我们需要添加 JavaScript 代码来实现幻灯片的展开和关闭。

// www.javascriptcn.com code example
const slides = document.querySelectorAll(".slider li");

slides.forEach((slide) => {
  slide.addEventListener("click", () => {
    if (slide.classList.contains("open")) {
      slide.classList.remove("open");
    } else {
      slides.forEach((s) => s.classList.remove("open"));
      slide.classList.add("open");
    }
  });
});

每当单击幻灯片时，我们将添加或删除 open 类，以切换幻灯片的展开状态。如果某个幻灯片已经展开，则单击该幻灯片将关闭它。否则，我们将关闭所有幻灯片并展开当前幻灯片。

实现效果

现在，我们已经实现了一个基于 Flexbox 布局的响应式幻灯片。让我们来看一下最终效果：https://codepen.io/JessicaLi0524/pen/mdWwbQX

你可以尝试在不同设备上查看幻灯片，还可以尝试更改幻灯片的数量和内容，以看到它的自适应性能。使用 Flexbox 布局，你可以快速轻松地创建响应式网页，并提高用户的体验效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d77ebba941bf7134d6f772

Flexbox 布局下实现响应式可展开幻灯片

什么是 Flexbox？

实现 Flexbox 布局下的响应式幻灯片

实现效果

接着读