什么是 Flexbox
Flexbox 是 CSS3 中的一种布局模式，可以用于创建灵活的、响应式的布局，尤其适合设计复杂的页面布局。使用 Flexbox 可以轻松地实现多列、垂直居中、等高布局等效果。
Flexbox 布局的基本概念
在使用 Flexbox 布局之前，我们需要了解一些基本概念：
- Flex Container：容器，包含了一组 Flex Items。
- Flex Item：容器中的子元素，可以是任何 HTML 元素。
- Main Axis：主轴，Flex Container 的主要方向。
- Cross Axis：交叉轴，与 Main Axis 垂直的方向。
实现多种形态的图片布局
下面我们将使用 Flexbox 布局来实现多种形态的图片布局。
等高图片布局
在等高图片布局中，我们希望所有图片的高度相同，但是宽度可以不同。下面是实现该效果的示例代码：
<div class="container"> <div class="item"><img src="image1.jpg"></div> <div class="item"><img src="image2.jpg"></div> <div class="item"><img src="image3.jpg"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- -- ------- ----- - ----- --- - ------ ----- ------- ----- -
在上面的代码中，我们使用了 flex-wrap: wrap 属性，使得 Flex Items 可以自动换行。同时，通过设置 flex: 1 属性，让每一个 Flex Item 的宽度自适应，并且等分容器的宽度。最后，设置图片的宽度为 100%，高度自适应，这样就实现了等高图片布局。
等宽图片布局
在等宽图片布局中，我们希望所有图片的宽度相同，但是高度可以不同。下面是实现该效果的示例代码：
<div class="container"> <div class="item"><img src="image1.jpg"></div> <div class="item"><img src="image2.jpg"></div> <div class="item"><img src="image3.jpg"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ----- -- ------- ----- -------- ----- --------------- ------- - ----- --- - ------ ----- ------- ----- ----- -- -
在上面的代码中，我们使用了 justify-content: space-between 属性，使得 Flex Items 在主轴上均匀分布。同时，通过设置 flex-direction: column 属性，让每一个 Flex Item 内部的元素垂直排列。最后，设置图片的宽度为 100%，高度自适应，并且设置了 flex: 1 属性，让图片占据 Flex Item 的剩余空间，从而实现了等宽图片布局。
网格图片布局
在网格图片布局中，我们希望将图片排列成一个二维网格，每一个网格中都有一张图片。下面是实现该效果的示例代码：
<div class="container"> <div class="item"><img src="image1.jpg"></div> <div class="item"><img src="image2.jpg"></div> <div class="item"><img src="image3.jpg"></div> <div class="item"><img src="image4.jpg"></div> <div class="item"><img src="image5.jpg"></div> <div class="item"><img src="image6.jpg"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- - ----- - ----------- ----------- - ------ ------- ----- - ----- --- - ------ ----- ------- ----- -
在上面的代码中，我们使用了 flex-wrap: wrap 属性，使得 Flex Items 可以自动换行。同时，通过设置 flex-basis: calc(33.33% - 20px) 属性，让每一个 Flex Item 的宽度为 33.33%，并且减去了 margin 的宽度。最后，设置图片的宽度为 100%，高度自适应，这样就实现了网格图片布局。
总结
通过本文的介绍，我们可以看到 Flexbox 布局的强大之处。使用 Flexbox 可以轻松地实现多种形态的图片布局，而且还可以用于创建复杂的页面布局。希望本文能够对你学习 Flexbox 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f947c2d10417a222511d29