响应式网页设计：灵活盒子布局CSS Flexbox

CSS Flexbox，灵活盒子布局模块，是“Flexible Box Layout”的缩写，是一种布局模型，可以安排容器内各个项目之间的空间分布和对齐功能，让您比传统方法更轻松、更高效地设计复杂的网页布局。它的一个重要优势是更有效的在容器中的项目之间分配空间，即使它们的大小未知或动态。 Flexbox是一维布局工具，一次只处理行或者列（一维布局）。这与 CSS Grid网格布局的二维模型形成对比，后者同时控制列和行。

以下是 CSS Flexbox 工作原理的详细说明：

容器和项目（项目是容器里面的内容）：要使用 Flexbox，您首先需要一个 Flex 容器。增加CSS属性给容器， display: flex; 或 display: inline-flex; 属性将任何HTML Elements元素设为 Flex 容器。一旦一个元素成为弹性容器，它的直接子元素就成为flex项目。

.container { display：flex; }

主轴和交叉轴：Flexbox 使用两个轴 - 主轴和交叉轴（或者使用行和列的概念）。默认情况下，主轴水平延伸（从左到右），交叉轴垂直延伸（从上到下）。可以根据需要更改这些轴的方向。Flexbox每次只能工作在一个轴向，默认轴是水平轴。

Flex容器的属性

display：将元素定义为 Flex 容器。
flex-direction：指定主轴方向。它可以是row、row-reverse、column或column-reverse。
flex-wrap：确定弹性项目是强制单行还是可以换行。
justify-content：沿主轴对齐弹性项目。
align-items：沿交叉轴对齐弹性项目。
align-content：当横轴上有额外空间时，对齐 Flex 容器内的 Flex 线。


        	.container {
        		display: flex;
        		flex-direction: row; /* or column, row-reverse, column-reverse */
        		flex-wrap: nowrap; /* or wrap, wrap-reverse */
        		justify-content: flex-start; /* or flex-end, center, space-between, space-around */
        		align-items: stretch; /* or flex-start, flex-end, center, baseline */
        		align-content: stretch; /* or flex-start, flex-end, center, space-between, space-around */
        	}

flex-direction 排列方向

例一：flex-direction: row 沿水平方向排列，从左向右

例二：flex-direction: column 沿垂直方向排列，从上向下

例三：flex-direction: row-reverse 水平方向，但顺序颠倒

例四：flex-direction: column-reverse 垂直方向，但顺序颠倒

flex-wrap 换行

例一：flex-wrap: nowrap 强制一行（或一列）

width: 50%

width: 20%

width: 50%

例二：flex-wrap: wrap 允许换行

width: 50%

width: 20%

width: 50%

justify-content 内容分布

例一：justify-content: flex-start; 起始位置，即左对齐

例二：justify-content: flex-end; 终止位置，即右对齐

例三：justify-content: space-around; 空间围绕于项目（左右或上下）

例四：justify-content: space-between; 空间填充于项目之间

align-items 项目在垂直轴向对齐

例一：align-items: center; 对齐于容器中间。对于水平布局，中间是指垂直方向的中间。

1
11
111

2
22

例二：align-items: flex-start; 对齐于容器顶部（或左边）

例三：align-items: flex-end; 对齐于容器底部（或右边）

例四：align-items: stretch; 项目沿着垂直方向拉伸，充满容器

1
11
111

例五：align-items: baseline; 沿着基线对齐

Flex 项目属性

order：指定 Flex 项目相对于 Flex 容器中其他项目的显示顺序。
flex-grow：确定当主轴上有额外空间时，弹性项目相对于其他项目增长多少。
flex-shrink：指定当主轴上没有足够空间时，弹性项目相对于其他项目收缩的程度。
flex-basis：定义 Flex 项目在放入 Flex 容器之前的初始大小。
flex：flex-grow、flex-shrink 和 flex-basis 组合的简写。< /里>


                                                		.item {
                                                            order: 1;
                                                            flex-grow: 1;
                                                            flex-shrink: 1;
                                                            flex-basis: auto;
                                                            /* OR */
                                                            flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */
                                                        }

例一：order 定义排列顺序

1 style="order:2"

2 style="order:3"

3 style="order:1"

例二：flex-grow 另一种方法定义项目的宽窄（或高低）

1 style="flex-grow: 1"

2 style="flex-grow: 6"

3 style="flex-grow: 3"

例三：flex-shrink 项目收缩

2 style="flex-shrink: 0"

例四：flex-basis 项目的初始宽度（高度）

2 style="flex-basis: 280px"

对齐和排序：Flexbox 提供了用于在 Flex 容器内对齐和排序 Flex 项目的属性。您可以更改项目的顺序、沿主轴或横轴对齐它们、在它们之间或周围分配空间等等。

Flexbox 功能强大且灵活，允许多种布局，而无需诉诸浮动或定位技巧。它在现代浏览器中得到广泛支持，是响应式网页设计的重要工具。

最后，让我们利用刚刚学习的知识，来生成一个上下左右居中的布局：

<div class="container">中</div>
                                        /* CSS */
                                        .container {
                                        	display: flex;
                                        	height: 5rem;
                                        	justify-content: center;
                                        	align-items: center;
                                        	background-color: lightyellow;
                                        }

中

互联网

科技