背景
如今网页布局设计越来越复杂，需要适应不同设备尺寸的适应性布局问题也逐渐凸显。在过去，我们可能会使用多个媒体查询和 CSS 定位来处理不同屏幕大小和分辨率下的布局，这种方式可维护性差且耗费精力。如今，CSS Flexbox 和 Grid 给前端开发者带来了绝佳的解决方案。它们提供了高效而直接的方法来创建响应式布局，可适应所有设备尺寸。
CSS Flexbox
Flexbox 是一种基于网格的布局模型，主要用于在容器中布置和对齐元素。它使得容器中的元素更好地适应不同的屏幕尺寸和分辨率，从而创造出更加优雅和灵活的界面。
父容器属性
以下是一些定义在 flex 父容器上的属性：
display: 这是到目前为止最重要的属性，它用于定义一个 flex 容器，它的属性值为: flex 或 inline-flex
justify-content: 此属性用于控制 flex 子元素的横向对齐方式。可取值包括 flex-start、center、flex-end、space-between 和 space-around
align-items: 此属性用于设置子元素在交叉轴上的垂直对齐方式。可取值包括 start、center、end、stretch 和 baseline
flex-direction: 此属性用于规定 flex 容器内的 flex 元素的排列方向。可取值包括 row、column、row-reverse 和 column-reverse。
子容器属性
以下是一些与 flex 子元素相关的属性：
order: 此属性控制 flex 元素在容器中现实的顺序。可以通过这个属性对元素进行排序。
flex-grow: 此属性控制 flex 元素在空间上的扩张能力，可设置值为 0 或大于 0 的数字。
flex-basis: 此属性定义了 flex 元素的初始主轴尺寸。默认值为 auto，表示元素本身的大小
flex-shrink: 此属性控制元素在空间不足时的收缩能力。可设置值为 0 或大于 0 的数字。
示例代码
以下是一个简单的 flexbox 布局示例:
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---- - ----------------- ----- ------ ------ ------- ----- -------- ----- ---------- ----- -
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS Grid
CSS Grid 是另一种实现复杂布局的强大工具，它提供了一个更强大、更灵活的网格操作系统，让开发者更轻松地创建响应式布局。
父容器属性
以下是一些在 CSS Grid 父容器上定义的属性：
display: 此属性设置元素的渲染格式为网格，即 grid 或 inline-grid
grid-template-columns: 此属性用于定义网格列的数量、宽度和间距。可以使用其他属性来规定网格行的数量、高度和间距。
grid-template-rows: 此属性用于定义网格行的数量、高度和间距。
justify-items: 此属性用于控制网格列上单元格的水平位置。可取值包括 start、center 和 end
子容器属性
以下是一些与 CSS Grid 子元素相关的属性：
grid-column: 此属性指定单元格从哪个网格列开始，到哪个网格列结束。可使用标准定义值。
grid-row: 此属性指定单元格从哪个网格行开始，到哪个网格行结束。可使用标准定义值。
示例代码
以下是一个简单的 CSS Grid 布局示例:
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- --------- ----- - ---- - ----------------- ----- ------ ------ -------- ----- ---------- ----- -
<div class="container"> <div class="box" style="grid-column: 1/3;">Box 1</div> <div class="box" style="grid-column: 2/4;">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> <div class="box">Box 6</div> </div>
总结
CSS Flexbox 和 CSS Grid 是两个非常强大的工具，它们使得响应式布局变得更为容易和高效。本文提供了一些父级和子级属性以及两个实例代码，但这只是一些基础的概念和示例。如果你想深入了解更多的知识，可以参考以下资料：
CSS Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459fb39968c7c53b0c1652a