html+css基础：30、伸缩盒模型(伸缩项目--伸/缩，flex复合属性，项目排序与单独对齐，案例)

伸缩盒模型的伸缩项目--伸/缩flex复合属性项目排序与单独对齐案例等Ⅰ、伸缩盒模型的伸缩项目--伸flex-grow: 0;其一、代码为其二、结果为Ⅱ、伸缩盒模型的伸缩项目--缩flex-shrink: 1;其一、代码为其二、结果为Ⅲ、伸缩盒模型的 flex 复合属性flex:1 1 auto;其一、代码为其二、结果为Ⅳ、伸缩盒模型的项目排序与单独对齐align-self: center;其一、代码为其二、结果为Ⅴ、伸缩盒模型的小案例其一、设计稿为口述需求其二、代码为其三、结果为Ⅵ、小结Ⅰ、伸缩盒模型的伸缩项目–伸flex-grow: 0;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title10_伸缩项目_伸/titlestyle.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/headbodydivclassouterdivclassinner inner11/divdivclassinner inner22/divdivclassinner inner33/div/div/body/html其二、结果为//一进入页面后的页面Ⅱ、伸缩盒模型的伸缩项目–缩flex-shrink: 1;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title11_伸缩项目_缩/titlestyle.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/headbodydivclassouterdivclassinner inner1divstylewidth:50px;height:50px;background-color:green;1/div/divdivclassinner inner22/divdivclassinner inner33/div/div/body/html其二、结果为//一进入页面后的页面Ⅲ、伸缩盒模型的 flex 复合属性flex:1 1 auto;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title12_flex复合属性/titlestyle.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/headbodydivclassouterdivclassinner inner11/divdivclassinner inner22/divdivclassinner inner33/div/div/body/html其二、结果为//一进入页面后的页面Ⅳ、伸缩盒模型的项目排序与单独对齐align-self: center;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title13_项目排序与单独对齐/titlestyle.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/headbodydivclassouterdivclassinner inner11/divdivclassinner inner22/divdivclassinner inner33/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;其二、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title尚硅谷官网/titlestyle*{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/headbody!-- 头部 --headerclasspage-headerahref#imgsrc../images/logo.pngaltlogo/aulclassheader-navliahref#国内校区/a/liliahref#缅甸校区/a/liliahref#非洲校区/a/liliahref#美国校区/a/li/ul/header!-- 内容区 --divclasspage-contentdivclasscontent-navdivclassitemimgsrc../images/item1.pngaltspan我的邮箱/span/divdivclassitemimgsrc../images/item2.pngaltspan云服务/span/divdivclassitemimgsrc../images/item3.pngaltspan手机课堂/span/divdivclassitemimgsrc../images/item4.pngaltspan微信服务/span/divdivclassitemimgsrc../images/item5.pngaltspan在线客服/span/div/div/div/body/html其三、结果为//一进入页面后的页面Ⅵ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、若有转发或引用本文章内容请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482**其四、再有兴趣的话也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)[https://blog.csdn.net/weixin_43405300/category_12654744.html?spm1001.2014.3001.5482](https://blog.csdn.net/weixin_43405300/category_12654744.htm