第4章：Flexbox及其在Web开发中的应用及Grid布局技术及其应用

Flexbox布局（Flexible Box Layout）

Flexbox布局（简称Flex布局）作为CSS3中的一种现代化一维布局工具被提出。它特别适合处理复杂排列需求以及无法预先确定大小的元素。这种现代设计方法的主要目标在于使容器能够动态调整子元素的宽度、高度以及排列顺序，并以最优方式填充可用空间，在响应式设计场景下表现出色。

容器属性详解 ：

display: flex;：设置父容器为Flex容器，开启Flex布局。

flex-direction：指定主轴方向。支持的取值有row（默认值）、row-reverse、column和column-reverse。

决定如何进行元素的内排版和方向设置。支持的取值包括non-wrap选项（默认情况下不会换行）、wrap选项（会自动换行）以及reverse-wrap选项（反向换行）。

justify-content 沿着主要轴线的排列方式，在 HTML/CSS 中用于控制 flex 容器内各项之间的分布状态。例如 flex-start（左端靠紧/顶端靠紧）、center（居中排列）、flex-end（右端靠紧/底端靠紧）、space-between（两端间隔一致）以及 space-around（各元素之间间隔一致）。

align-items：沿水平方向上对齐内容的方式，在水平轴上执行