什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，它是 flexible box 的缩写。它使得在容器中的子元素可以自适应大小和位置，并且可以响应容器的空间。Flexbox 由一个容器和容器中的一些子元素组成。容器定义了 Flexbox 的布局，并直接影响到 Flexbox 内子元素在页面中的排版。
Flexbox 布局的优势
- 在维护期间，可以让代码更易于管理和修改；
- 简化了对无法使用 JavaScript 的灵活布局功能的开发；
- 可以方便地实现响应式布局；
- 可以轻松易行地垂直居中元素。
- 容器样式定义：将容器定义为 Flexbox 容器，以确定 Flexbox 的布局样式。
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}- 容器和子元素的尺寸设定：在 Flexbox 的布局中，可以使用
flex属性来决定子元素的尺寸，同时也可以设置容器和子元素的高度和宽度。
-- -------------------- ---- ------- ---------- - ------- ----- ------ ----- - ---------- ----- - ----------- ---- ------- ------ ------- ----- -
- 主轴与侧轴的对齐：使用
justify-content和align-items属性来控制 Flexbox 中的主轴和侧轴的对齐方式。
.container {
display: flex;
justify-content: center; /* 在主轴上居中 */
align-items: center; /* 在侧轴上居中 */
}- 用媒体查询实现响应式布局
-- -------------------- ---- -------
------ ----------------- -
---------- ----- -
----------- ----
-
-
------ ------------------ -
---------- ----- -
----------- ----
-
-示例代码
<div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> <div class="item">项目 4</div> <div class="item">项目 5</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
------- -----
------ -----
---------- -----
---------------- --------------
------------ -------
-
---------- ----- -
----------- ----
------- ------
------- -----
----------------- --------
-
------ ----------------- -
---------- ----- -
----------- ----
-
-
------ ------------------ -
---------- ----- -
----------- ----
-
-总结
设计一个基于 Flexbox 的响应式布局可以大大简化前端工作中的布局和对响应式设计的支持，并提高代码的可维护性和可读性。通过合适的容器和项目的尺寸和对齐方式，以及媒体查询进行相应布局的实现，可以实现对不同设备及尺寸的响应式支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f3d83968c7c53b014db07