企业官网建设流程全解析

Ⅰ、伸缩盒模型的伸缩项目–伸：flex-grow: 0;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>10_伸缩项目_伸</title><style>.outer{width:1000px;height:900px;background-color:#888;margin:0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display:flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction:row;/* 主轴换行方式，换行 */flex-wrap:wrap;/* 主轴的对齐方式，主轴的起始位置 */justify-content:flex-start;}.inner{width:200px;height:200px;background-color:skyblue;border:1px solid black;box-sizing:border-box;/* 设置伸缩项目在主轴上的扩展比例，值为 0 表示不扩展，默认值为 0 (即：即使有空余空间，子元素也不放大)*//* 如果所有子元素的 flex-grow 都是 0（默认值）：子元素保持自身大小，父元素末尾留白; *//* flex-grow 与 flex-shrink的区别：flex-grow 是空间“多余”时用(场景：实际宽度等小于容器时)，flex-shrink 是空间“不够”时用(场景：实际宽度等超出容器时) */flex-grow:0;}.inner1{flex-grow:1;}.inner2{flex-grow:2;/* width: 300px; */}.inner3{flex-grow:3;}</style></head><body><divclass="outer"><divclass="inner inner1">1</div><divclass="inner inner2">2</div><divclass="inner inner3">3</div></div></body></html>

其二、结果为：

//一进入页面后的页面：

Ⅱ、伸缩盒模型的伸缩项目–缩：flex-shrink: 1;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>11_伸缩项目_缩</title><style>.outer{width:400px;height:900px;background-color:#888;margin:0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display:flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction:row;/* 主轴换行方式，换行 *//* flex-wrap: wrap; *//* 主轴的对齐方式，主轴的起始位置 */justify-content:flex-start;/* 侧轴的对齐方式 */align-content:flex-start;}.inner{width:200px;height:200px;background-color:skyblue;border:1px solid black;box-sizing:border-box;/* 设置伸缩项目在主轴上的收缩比例，值为 0 表示不收缩，默认值为 1(即：空间不足时，子元素会默认等比例缩小) *//* 如果所有子元素的 flex-shrink 默认都是 1：空间不足时，大家都会按比例缩小，互不溢出；如果子 A 的 flex-shrink: 0：这代表子 A 非常强硬，绝对不缩小。 *//* flex-grow 与 flex-shrink的区别：flex-grow 是空间“多余”时用(场景：实际宽度等小于容器时)，flex-shrink 是空间“不够”时用(场景：实际宽度等超出容器时) */flex-shrink:1;}.inner1{/* 设置伸缩项目在主轴上的收缩比例，值为 1 表示收缩 */flex-shrink:1;}.inner2{flex-shrink:2;width:300px;}.inner3{flex-shrink:3;}</style></head><body><divclass="outer"><divclass="inner inner1"><divstyle="width:50px;height:50px;background-color:green;">1</div></div><divclass="inner inner2">2</div><divclass="inner inner3">3</div></div></body></html>

其二、结果为：

//一进入页面后的页面：

Ⅲ、伸缩盒模型的 flex 复合属性：flex:1 1 auto;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>12_flex复合属性</title><style>.outer{width:600px;height:900px;background-color:#888;margin:0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display:flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction:row;/* 主轴换行方式，换行 *//* flex-wrap: wrap; *//* 主轴的对齐方式，主轴的起始位置 */justify-content:flex-start;/* 侧轴的对齐方式 */align-content:flex-start;}.inner{width:200px;height:200px;background-color:skyblue;border:1px solid black;box-sizing:border-box;/* 可以拉伸 *//* flex-grow: 1; *//* 可以压缩 *//* flex-shrink: 1; *//* 基准长度 *//* flex-basis: 100px; *//* 可以拉伸 可以压缩 不设置基准长度，可简写为：flex:auto */flex:1 1 auto;/* 可以拉伸 可以压缩 设置基准长度为0(即：所有兄弟的宽(一般是宽，或高)，已经不重要(即：不生效了)，全部平分宽度)，可简写为：flex:1 *//* flex: 1 1 0; *//* 不可以拉伸 不可以压缩 不设置基准长度，可简写为：flex:none *//* flex: 0 0 auto; *//* 不可以拉伸 可以压缩 不设置基准长度，可简写为：flex:0 auto *//* flex: 0 1 auto; */}</style></head><body><divclass="outer"><divclass="inner inner1">1</div><divclass="inner inner2">2</div><divclass="inner inner3">3</div></div></body></html>

其二、结果为：

//一进入页面后的页面：

Ⅳ、伸缩盒模型的项目排序与单独对齐：align-self: center;

其一、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>13_项目排序与单独对齐</title><style>.outer{width:600px;height:900px;background-color:#888;margin:0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display:flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction:row;/* 主轴换行方式，换行 *//* flex-wrap: wrap; *//* 主轴的对齐方式，主轴的起始位置 */justify-content:flex-start;/* 侧轴的对齐方式 */align-content:flex-start;}.inner{width:200px;height:200px;background-color:skyblue;border:1px solid black;box-sizing:border-box;/* 可以拉伸 可以压缩 设置基准长度为0，可简写为：flex:1 */flex:1 1 0;}.inner1{/* 通过 order 属性改变项目的排列顺序，值越小，排列越靠前 */order:3;}.inner2{order:2;}.inner3{order:1;}.inner2{/* align-self 用来单独设置某个 flex 项目在交叉轴上的对齐方式，可以覆盖容器的 align-items 设置 */align-self:center;}</style></head><body><divclass="outer"><divclass="inner inner1">1</div><divclass="inner inner2">2</div><divclass="inner inner3">3</div></div></body></html>

其二、结果为：

//一进入页面后的页面：

Ⅴ、伸缩盒模型的小案例：

其一、设计稿为：口述需求

重置样式： * { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; } a { text-decoration: none; } ul { list-style: none; } 背景：铺满全屏 头部： 高度 70px 背景色 rgba(0, 0, 0, 0.7) 左右各种20px内边距 导航文字：白色文字、1px白色边框、圆角8px、内边距10px、间距20px 中间大导航： 宽：1000px 高：300px 在内容区水平垂直居中 大导航里的每一个导航项 宽：180px 高度：200px 五个大导航，颜色分别为： #595CA8; #FF9D2E; #01A6DE; #015E91; #1DC128; #01A6DE;

其二、代码为：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>尚硅谷官网</title><style>*{font-family:Arial;font-size:14px;margin:0;padding:0;border:none;}a{text-decoration:none;}ul{list-style:none;}html,body{width:100%;/* 此时的 html 和 body 都没有高度，设置 height: 100%; 后，body 的高度会找 html，而 html 的高度会找视口 */height:100%;}body{background-image:url('../images/bg.jpg');/* body 是没有高度的，因此只在 body 中设置 width: 100%; 和 height: 100%; 是没有意义的 */background-repeat:no-repeat;background-size:cover;}.page-header{height:70px;background-color:rgba(0,0,0,0.7);display:flex;justify-content:space-between;align-items:center;padding:0 20px;}.header-nav{display:flex;}.header-nav li a{color:white;font-size:20px;border:1px solid white;border-radius:8px;padding:10px;margin-right:20px;}.header-nav li:last-child a{margin-right:0;}.page-content{display:flex;height:calc(100vh - 70px);}.content-nav{width:1000px;height:300px;margin:auto;display:flex;justify-content:space-evenly;/* 水平轴实现空间均分(包括间隙) */align-items:center;/* flex 布局中的单行，垂直居中的操作 */}.content-nav .item{width:180px;height:200px;background-color:orange;display:flex;flex-direction:column;/* 通过 flex-direction: column; 实现了水平切换成垂直*/align-items:center;/* 此时的侧轴是一行，且在未设置侧轴对齐方式的情况下，此时默认侧轴的对齐方式是 stretch，又没有给项目设置宽度(即：高度，因为设置了主轴为 flex-direction: column;)， 因此此时的 item 元素会把宽度(即：高度铺满)； 由于 img 图片又是等比例放大的属性，因此会看到图片像是扩大了一样; 但在设置 align-items: center; 后达到效果 */justify-content:space-evenly;/* 由于此时默认是沿着主轴的方向： justify-content: flex-start; 因此默认是顶在上面，设置 justify-content: space-evenly; 后达到效果 */transition:0.2s linear;cursor:pointer;}.content-nav .item:hover{box-shadow:0px 0px 20px black;}.content-nav .item span{font-size:20px;color:white;}.content-nav .item:nth-child(1){background-color:#595CA8;}.content-nav .item:nth-child(2){background-color:#FF9D2E;}.content-nav .item:nth-child(3){background-color:#01A6DE;}.content-nav .item:nth-child(4){background-color:#015E91;}.content-nav .item:nth-child(5){background-color:#1DC128;}</style></head><body><!-- 头部 --><headerclass="page-header"><ahref="#"><imgsrc="../images/logo.png"alt="logo"></a><ulclass="header-nav"><li><ahref="#">国内校区</a></li><li><ahref="#">缅甸校区</a></li><li><ahref="#">非洲校区</a></li><li><ahref="#">美国校区</a></li></ul></header><!-- 内容区 --><divclass="page-content"><divclass="content-nav"><divclass="item"><imgsrc="../images/item1.png"alt=""><span>我的邮箱</span></div><divclass="item"><imgsrc="../images/item2.png"alt=""><span>云服务</span></div><divclass="item"><imgsrc="../images/item3.png"alt=""><span>手机课堂</span></div><divclass="item"><imgsrc="../images/item4.png"alt=""><span>微信服务</span></div><divclass="item"><imgsrc="../images/item5.png"alt=""><span>在线客服</span></div></div></div></body></html>

其三、结果为：

//一进入页面后的页面：

Ⅵ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
**其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：[https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482](https://blog.csdn.net/weixin_43405300/category_12654744.htm