flex布局怎么实现宽度自适应？

2023-10-20 18:40| 来源: 网络整理| 查看: 265

1、UI界面

页面分为两个部分，左右两格，当页面进行伸缩时，其宽度随着页面宽度自适应。在这里插入图片描述

左右两格排列给父元素div进行设置 display: flex; flex-flow: row wrap; // 以行排列并且允许换行 align-content: flex-start; flex-flow 设置轴向与换行组合

是 flex-direction 和 flex-wrap 的简写。所以只要掌握，flex-direction 和 flex-wrap即可。

两个盒子的宽度随着页面宽度自适应。为了实现这一功能，这里就要引入CSS3的calc()属性。calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。这个函数使我们能够计算CSS值，而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。

需要特别注意重要一点是+和-运算符必须用空格隔开，不然无法正常工作。*和/运算符不有这限制，但出于一致性的考虑，建议添加空格。

另外，很棒的是，我们可以混合CSS单位，例如，我们可以减去百分比和像素。

代码如下给子元素设置 // 给奇数元素设置了右边距的情况下 test:nth-child(odd) { margin-right: 20px; } test: { width: calc(50% - 10px); } 对于下面这个布局，主要是实现三角形，并且给三角形加边框颜色。在这里插入图片描述

三角形三条边框透明，一条边框有颜色。向左的三角形 border-right: 26px solid #FFFFFF; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 8px solid transparent;

另一种写法

向上的三角形 border-width: 0 5px 8px; border-style: solid; /* 四个颜色值上右下左 */ /* 三个颜色值上透明左右透明下颜色 */ border-color: transparent transparent #ffffff; 给三角形边框设置颜色、设置阴影。做法其实就是设置两个三角形出来，位置不一样，即可实现边框、阴影的效果使用到伪类元素：：before :after知道了原理其实代码也就很简单边框颜色就是给两个三角形设置不同的颜色边框，阴影同样，给两个三角形设置不同的颜色即可。 test:before { ... } test:after { ... } 对于哪个方向的三角形，设置的时候只要给与方向相反的边颜色即可。

例如：

左三角 #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

在这里插入图片描述

右三角 #triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

在这里插入图片描述

1、对于以上提示框的好的，我知道了,这一功能的实现。 2、解决方案是使用LocalStorage进行本地存储

关闭提示的时候进行存储 dom.find(".tip span").on("click ", function () { dom.find(".tip").addClass("none"); window.localStorage.setItem("prompt", true); }) 在页面初始化的时候进行判断 // 控制提示是否显示 if (!window.localStorage.getItem("prompt")) { dom.find(".tip").removeClass("none"); } else { dom.find(".tip").addClass("none"); }

在这里插入图片描述

【本文地址】

公司简介

联系我们