项目四任务一 制作首页

大美中国制作首页CONTENTS目录弹性盒子布局的概念第一部分弹性三要素第二部分设置对齐方式第三部分弹性盒子布局的概念第一部分弹性盒子布局的概念弹性盒子（Flexbox）布局是一种CSS布局模块，用于在容器内为元素对齐和分配空间。在元素大小未知或动态变化的情况下，弹性盒子布局都可以轻松地处理它们的对齐、排序和分布。这种布局方式非常适合于一维布局，即在网页设计中，元素沿着单一方向（水平或垂直）排列的布局方式。在这种布局中，元素的排列是线性的，通常只在一个维度上进行扩展。弹性盒子布局的概念1.容器在弹性盒子布局中，容器是指使用display:flex;或display:inline-flex;属性的元素。当元素被定义为容器后，其内部的直接子元素就是弹性项。容器与其内部的弹性项共同构成弹性上下文，其子元素将按照弹性盒子的规则进行布局。弹性盒子布局的概念2.主轴在弹性盒子布局中，主轴是指弹性容器内的弹性项沿着哪个方向排列的轴线。主轴的方向由CSS中的属性flex-direction决定，可以是水平方向，也可以是垂直方向。Flex-direction属性有以下4个属性值。主轴是水平方向，从左到右主轴是水平方向，从右到左主轴是垂直方向，从上到下主轴是垂直方向，从下到上rowrow-reversecolumncolumn-reverse默认值弹性盒子布局的概念2.主轴弹性三要素第二部分弹性三要素在使用弹性盒子进行布局时，关于弹性项在容器中如何分配空间、如何伸缩以及如何适应容器大小的变化，这些问题都是由弹性三要素来控制的。通过调整这些要素，开发者可以精确控制元素在容器中的行为，实现复杂的布局需求。弹性三要素1.flex-grow（弹性增长因子）flex-grow（弹性增长因子）用于控制弹性项在容器中剩余空间的分配比例。如果容器的总空间大于各弹性项的基础大小（flex-basis）之和，flex-grow属性决定了弹性项能够扩展多少来填充额外的空间。当设计者希望某些弹性项在容器中占据更多的空间时，可以通过增加这些弹性项的flex-grow值，使得它们在容器中占据更多的空间。flex-grow属性的默认值为0，即弹性项不扩展。弹性三要素2.flex-shrink（弹性收缩因子）flex-shrink（弹性收缩因子）用于控制当容器空间不足以容纳所有弹性项时，弹性项可以缩小的比例。如果容器空间小于弹性项的基础大小之和，flex-shrink属性决定了弹性项在缩小时的相对比例。当设计者希望在容器空间不足时，某些项目比其他项目缩小得更多，可以通过增加这些弹性项的flex-shrink值。flex-shrink属性的默认值为1，即弹性项等量收缩。弹性三要素3.flex-basis（基础大小）flex-basis（基础大小）定义了在分配额外空间之前，弹性项占据的主轴空间大小。它是弹性项在主轴上的初始大小，可以是固定值（如像素）、百分比，或者是auto（自动计算）。当设计者希望弹性项有一个固定的起始大小，或者希望弹性项的大小基于其内容自动调整时，可以设置flex-basis。弹性三要素案例为第1个盒子的弹性项添加弹性增长因子，设置该值为1。为第2个盒子的弹性项添加弹性收缩因子，设置该值为0。弹性三要素4.flex在CSS中，可以使用flex属性来控制弹性项元素的行为，该属性包括三个部分，分别是：flex-grow、flex-shrink和flex-basis。弹性三要素4.flexflex属性可以通过以下方式来设置：flex：none，表示flex-grow:0、flex-shrink:0、flex-basis:auto，即各弹性项不会扩展也不会缩小，初始大小为内容大小。flex：auto，表示flex-grow:1、flex-shrink:1、flex-basis:auto，即各弹性项会等量扩展也会等量缩小，初始大小为内容大小。flex：initial，表示flex-grow:0、flex-shrink:1、flex-basis:auto，即各弹性项不会扩展，但是在必要时会等量缩小，初始大小为内容大小。flex:<正整数>，在这种情况下，flex属性的值为1个正整数时，表示flex-grow的值为该正整数，而flex-shrink和flex-basis的值为默认值，即分别为1和auto。弹性三要素5.设置换行在弹性盒子布局中，元素默认是单行排列的。我们可以通过设置容器的flex-wrap属性来控制元素的换行行为。当需要创建多行布局结构时，可以使用该属性，这对于响应式设计和创建复杂的布局非常有用。弹性三要素5.设置换行flex-wrap属性常用的属性值有以下几个值。

nowrap：默认值，表示弹性容器的所有项目不会换行，它们将在一行内显示。

wrap：表示弹性容器中的项目在必要时会换行，即如果一行中放不下所有的项目，它们会自动换到下一行。

wrap-reverse：与wrap类似，但是项目的换行方向是相反的。第一行的项目会显示在最后一行，第二行的项目显示在倒数第二行，以此类推。下面我们通过案例4-1-3来演示弹性容器中弹性项的换行。弹性三要素案例两个容器分别设置了不同的flex-wrap值，各容器内弹性项实现了换行显示。设置对齐方式第三部分设置对齐方式在弹性盒子布局中，对齐方式可以通过不同的属性来设置。这些属性控制了容器内部元素在主轴和交叉轴上的对齐方式。设置对齐方式1.justify-content属性justify-content属性用于控制容器内元素在主轴上的对齐方式。其常用的属性值有以下值。

flex-start：弹性项沿着主轴的起点对齐。

flex-end：弹性项沿着主轴的终点对齐。

center：弹性项沿着主轴的居中位置对齐。

space-between：弹性项沿着主轴的两端对齐，各项目均匀地沿着主轴排列并占满主轴，并且各项目之间的间隔相等，弹性项与容器边框之间没有间隔。

设置对齐方式1.justify-content属性

space-around：弹性项沿着主轴的两端和中间均匀分布，但两端的间隔是项目与中间间隔的一半。

space-evenly：弹性项沿着主轴的两端和中间均匀分布，所有间隔相等。设置对齐方式案例flex-start对齐方式flex-end对齐方式设置对齐方式案例center对齐方式space-between对齐方式设置对齐方式案例space-around对齐方式space-evenly对齐方式设置对齐方式2.align-items属性align-items属性用于控制容器内元素在交叉轴上的对齐方式。其常用的属性值有以下值。

stretch：默认值，如果弹性项未设置高度（或高度为auto），且容器的高度大于弹性项内容的高度，弹性项将在交叉轴上拉伸以填满容器的高度。

flex-start：所有弹性项在交叉轴的起始位置对齐。

flex-end：所有弹性项在交叉轴的终点位置对齐。

center：所有弹性项在交叉轴的居中位置对