flex & less

最新推荐文章于 2024-07-24 11:40:30 发布
最新推荐文章于 2024-07-24 11:40:30 发布
阅读量240 收藏
点赞数
分类专栏： less CSS3 文章标签： flex less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/119297432
版权
CSS3 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
less
1 篇文章 0 订阅
订阅专栏

文章目录

flex

  1. 项目永远排列在主轴的正方向上
  2. flex分新旧两个版本
    ① -webkit-box
    ② -webkit-flex/flex
  3. 我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
    移动端开发者必须要关注老版本的flex，因为很多移动端设备内核低只认老版本的flex 。
  4. 老版本的box通过两个属性四个属性值控制了主轴的位置和方向
  5. 新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

①老版本

容器

  1. 容器的布局方向
    -webkit-box-orient控制主轴是哪一根
    属性值：
    horizontal（水平的）
    vertical（垂直的）
  2. 容器的排列方向
    -webkit-box-orient 控制主轴的方向
    属性值：
    normal
    reverse
  3. 富裕空间管理
    只决定富裕空间的位置，不会给项目区分配空间
    主轴
    属性：-webkit-box-pack
    若主轴是x轴：
属性值效果
start在右边
end在左边
center在项目两边
justify在项目之间

若主轴是y轴：

属性值效果
start在下边
end在上边
center在项目两边
justify在项目之间

侧轴
属性：-webkit-box-align
若侧轴是x轴：

属性值效果
start在右边
end在左边
center在项目两边

若侧轴是y轴：

属性值效果
start在下边
end在上边
center在项目两边

项目

弹性空间管理:
-webkit-box-flex:弹性因子 (默认值为0)

②新版本

容器

  1. 容器的布局方向
  2. 容器的排列方向
    属性：flex-direction：控制主轴是哪一根，控制主轴的方向
属性值效果
row从左往右的 x轴
row-reverse从右往左的 x轴
column从上往下的y轴
column-reverse从下往上的y轴
  1. 富裕空间管理
    只决定富裕空间的位置，不会给项目区分配空间
    主轴
    属性：justify-content
属性值效果
flex-start在主轴的正方向
flex-end在主轴的反方向
center在项目两边
justify在项目之间
space-between在项目之间
space-around在项目两边

侧轴
属性：align-items

属性值效果
flex-start在侧轴的正方向
flex-end在侧轴的反方向
center在项目两边
baseline基线对齐
stretch等高布局（项目没有高度）

项目

弹性空间管理:
flex-grow:弹性因子 （默认值为0）

③新版本新增

容器

  1. flex-wrap：控制的是侧轴的方向
属性值效果
nowrap不换行，没有侧轴
wrap侧轴方向由上而下 （flex-shrink失效）
wrap-reverse侧轴方向由下而上 （flex-shrink失效）

  1. align-content：多行多列时，侧轴空间的管理（把多行多列看成一个整体）

  2. flex-flow：flex-direction和flex-wrap的简写属性
    本质上控制了主轴和侧轴分别是哪一根，以及他们的方向

项目

  1. order：控制项目的排列顺序
  2. align-self：项目自身富裕空间的管理
  3. flex-shrink：收缩因子（默认值为 1 ）
  4. flex-basis：伸缩规则计算的基准值（默认拿width和height的值）

④伸缩规则

  • flex-basis（默认值为auto）

  • flex-grow（默认值为0）

      	 可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
  	 可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
  	 每项伸缩大小 = (伸缩基准值(flex-basis) + (可扩展空间 x flex-grow值))

  • flex-shrink （默认值为1）

  1. 计算收缩因子与基准值乘的总和
    var a = 每一项flex-shrink*flex-basis之和
  2. 计算收缩因数
    收缩因数=（项目的收缩因子项目基准值）/第一步计算总和
    var b = (flex-shrink    flex-basis) / a
  3. 移除空间的计算
    移除空间= 项目收缩因数 x 负溢出的空间
    var c = b * 溢出的空间

⑤侧轴富裕空间的管理

单行单列:
align-items:
align-self（优先级高）:align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

多行多列:
align-content:属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用

⑥flex的简写属性

flex:1;即（flex-basis:0%; flex-grow:1; flex-shrink:1;）
等分布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;
				display: flex;
			}
			#wrap > .item{
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				
				flex-shrink: 1;
				flex-grow: 1;
				flex-basis: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">22</div>
			<div class="item">333</div>
			<div class="item">4444</div>
			<div class="item">55555</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

flex案例（简单淘宝导航界面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: gray;
				display: block; 
			}
			#nav > .row{
				display: flex;
				
			}
			#nav > .row > .item{
				flex: 1;
				text-align: center;
			}
			#nav > .row > .item > a:before{
				content: "";
				display: block;
				width: 86px;
				height: 86px;
				margin: 0 auto;
			}
			#nav > .row:nth-child(1) > .item:nth-child(1) > a:before{
				background: url(img/01.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(2) > a:before{
				background: url(img/02.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(3) > a:before{
				background: url(img/03.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(4) > a:before{
				background: url(img/04.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(5) > a:before{
				background: url(img/05.png) no-repeat;
			}
			
			#nav > .row:nth-child(2) > .item:nth-child(1) > a:before{
				background: url(img/06.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(2) > a:before{
				background: url(img/07.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(3) > a:before{
				background: url(img/08.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(4) > a:before{
				background: url(img/09.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(5) > a:before{
				background: url(img/10  .png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<div class="row">
				<div class="item">
					<a href="javascript:;">天猫</a>
				</div>
				<div class="item">
					<a href="javascript:;">聚划算</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫国际</a>
				</div>
				<div class="item">
					<a href="javascript:;">外卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫超市</a>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<a href="javascript:;">充值中心</a>
				</div>
				<div class="item">
					<a href="javascript:;">飞猪旅行</a>
				</div>
				<div class="item">
					<a href="javascript:;">领金币</a>
				</div>
				<div class="item">
					<a href="javascript:;">拍卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">分类</a>
				</div>
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

⑦css3媒体查询选择器

@media 媒体类型 and（关键字） 带条件的媒体属性 and 带条件的媒体属性 {
//规则
}

  1. 媒体类型
    all
    screen：只有彩色屏幕的时候，才会有作用
    print：只有打印的时候，才会有作用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#wrap{
				width: 100px;
				height: 100px;
				border: 1px solid;
				margin: 100px auto;
			}
			@media screen {
				/*规则*/
				#wrap{
					border: 10px solid;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>
  1. 媒体属性

  • width：浏览器窗口的尺寸（min、max前缀）
    min-width:800px; >=800px
    max-width:800px; <=800px

  • device-width:设备独立像素（min、max前缀）
    pc端：分辨率
    移动端：具体看机器的参数

  • device-pixel-ratio(必须加webkit前缀)
    pc端：1
    移动端：具体看机器的参数

  • 横竖屏切换:
    orientation:landscape(横屏)
    orientation:portrait(竖屏)

  1. 关键字
    only:处理浏览器尽量问题
    and:连接一条查询规则，代表“与”的意思
    ,：连接多条查询规则，代表“或”的意思
    not ：取反
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#wrap{
				width: 100px;
				height: 100px;
				border: 1px solid;
				margin: 100px auto;
			}
			@media only screen and (-webkit-device-pixel-ratio:2) and (orientation:landscape){
				/*规则*/
				#wrap{
					border: 10px solid;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>

css2媒体查询

示例：只有在打印时才能显示出来
index.css语句：

#wrap{
	width: 100px;
	height: 100px;
	margin: 100px auto;
	border: 10px solid;
}

html语句：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" media="print"/>
	</head>
	<body>
		<div id="wrap">
			
		</div>
	</body>
</html>

⑧多列布局（分栏布局）

column-width：指定每一栏的宽度
column-count：指定要多少栏
column-gap：栏目距离
column-rule：栏目间隔线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				border: 1px solid;
				width: 600px;
				margin: 0 auto;
				/*column-width: 200px;*/
				column-count: 2;
				column-gap: 30px;
				column-rule: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
			锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。锄禾日当午，汗滴禾下土。谁之盘中餐？粒粒皆辛苦。<br />
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

less

less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。less既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

①less中的注释

  • 以//开头的注释，不会被编译到css文件中
  • 以/**/包裹的注释会被编译到css文件中

②less中的变量

使用@来申明一个变量：@color：pink;

  1. 作为普通属性值只来使用：直接使用@color
  2. 作为选择器和属性名：#@{selector的值}的形式

less语句：

@color:pink;
@m:margin;
@selector:wrap;
*{
    @{m}: 0;
    padding: 0;
}
#@{selector}{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
    }
}
  1. 作为URL：@{url}
  2. 变量的延迟加载
    例：
    less语句：
@var:0;
.class{
    @var:1;
    .brass{
        @var:2;
        three:@var; //3
        @var:3;
    }
    one:@var;  //1
}

CSS语句：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

③less中的嵌套规则

  1. 基本嵌套规则
  2. &的使用

less语句:

@color:pink;

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
        &:hover{
            background: deeppink;
        }
    }
}

所对应的CSS语句：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #ffc0cb;
  height: 100px;
  width: 100px;
}
#wrap .inner:hover {
  background: deeppink;
}

④less中的混合

混合是什么？
混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

普通混合（编译到原生css中）

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: pink;
        height: 100px;
        width: 100px;
        
    }
    .inner2{
       position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: pink;
        height: 100px;
        width: 100px;
       
    }
    
}

不带参数混合（加括号）

.juzhong(){
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: pink;
        height: 100px;
        width: 100px;
}

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        .juzhong;
        
    }
    .inner2{
       .juzhong;
       
    }
    
}

带参数的混合

.juzhong(@w,@h,@c){
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: @c;
        height: @h;
        width: @w;
}

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        .juzhong(100px,100px,pink);
        
    }
    .inner2{
       .juzhong(200px,200px,deeppink);
       
    }
    
}

带默认值的混合

.juzhong(@w:10px,@h:10px,@c:pink){
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: @c;
        height: @h;
        width: @w;
        
}

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        .juzhong(100px,100px,pink);
        
    }
    .inner2{
       .juzhong();
       
    }
    
}

命名参数

less语句：

.juzhong(@w:10px,@h:10px,@c:pink){
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: @c;
        height: @h;
        width: @w;
        
}

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        .juzhong(100px,100px,pink);
        
    }
    .inner2{
       .juzhong(@c:black);
       
    } 
}

所对应的css语句：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #ffc0cb;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #000000;
  height: 10px;
  width: 10px;
}

匹配模式

示例：画三角形
triangle.less语句：

.triangle(@_){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}


.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
    border-width: @w;
    border-style:dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(T,@w,@c){
    border-width: @w;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent @c transparent;
}
.triangle(B,@w,@c){
    border-width: @w;
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}

less的应用语句：

@import "./triangle.less";

#wrap .sjx{
//  .triangle();
    .triangle(R,40px,yellow);
}

html语句：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/03匹配模式.css"/>
		
	</head>
	<body>
		<div id="wrap">
			<div class="sjx">
				
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

⑤less计算

  • 在less中可以进行加减乘除的运算
  • 计算的双方，只需要有一方带单位

⑥less继承

示例：
juzhong-extend.less语句：

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  
}
.juzhong:hover{
    background: red!important;
}

extend.less语句：

*{
    margin: 0;
    padding: 0;
}
@import "mixin/juzhong-extend.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    
    .inner{
        &:extend(.juzhong all);
        &:nth-child(1){
           width: 100px;
           height: 100px;
           background: pink;
        }
        &:nth-child(2){
           width: 50px;
           height: 50px;
           background: deeppink;
        }
    }
}

extend.css语句：

* {
  margin: 0;
  padding: 0;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover,
#wrap .inner:hover {
  background: red!important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background: pink;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: deeppink;
}

extend.html语句：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/extend.css"/>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				inner1
			</div>
			<div class="inner">
				inner2
			</div>
		</div>
	</body>
</html>

效果图：hover的时候颜色变为红色
在这里插入图片描述

⑦less避免编译

less语句：

*{
    margin: 100 *10px;
    padding: ~"cacl(100px + 100)";
}

所对应的CSS语句：

* {
  margin: 1000px;
  padding: cacl(100px + 100);
}
Cherry_Zj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex.less:一套用于CSS3 Flex布局的Less mixins
05-26
灵活少 一个的混入。 可用的混合 混合名称及其值对应于正式草案。 display justify-content align-items align-self align-content order flex flex-grow flex-shrink flex-basis flex-direction flex-wrap flex-flow 浏览器兼容性 在Firefox &lt;22中，您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。 /* * Legacy Firefox implementation treats all flex containers * as inline-block elements. */ @-moz-document url-prefix() { # selector
flex布局和less语言的使用
weixin_43204464的博客
08-28 315
移动端 flex布局，less语言使用
css(7)less和flex的基本知识
m0_62520946的博客
02-27 371
less 简介 less是一门css的预处理，是一个css的增强版，通过less可以写更少的代码实现更强大的样式 在less中添加了许多的新特性，eg对变量的支持，对mixin的支持 less的语法大体上和css语法一致，但less中增添了许多对css的扩展 所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行 示例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="
less和flex
Candycandyma的博客
04-16 367
less是一门css的预处理语言，less是css的增强版，通过less可以编写更少的代码实现更强大的功能。 在less中增添了许多新的特性，如对变量的支持、对mixin的支持；less语法大体上和css语法一致，但less增添了许多新的扩展，所以浏览器无法直接执行less代码，必须将less转化为css代码才可以执行。 注意：less的单行注释//，注释的内容不会被解析到css中；css中的注释...
封装flex布局（Less）
旭哥的博客
06-04 2057
使用less封装flex布局，总结flex知识。
基于less+flex+rem技术的移动端页面开发
04-05
在移动端页面开发中，&quot;基于less+flex+rem技术的移动端页面开发&quot;是一个现代且高效的方法，它结合了Less预处理器、Flex布局和rem单位，以实现高度响应式设计和跨设备兼容性。以下是这些技术的详细介绍： 1. **Less预...
前端-flex布局案例
03-20
在实际项目中，我们可以结合CSS预处理器（如Sass或Less）和CSS变量，进一步提高代码的可维护性和复用性。在提供的&quot;flex布局&quot;案例中，可以详细查看并分析各个示例，理解如何将理论知识应用到实际场景中。
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
`用于开启flex容器，`flex-grow`、`flex-shrink`和`flex-basis`控制子元素的伸缩行为，而`align-items`和`justify-content`则用于调整元素在主轴和交叉轴上的对齐方式。 然后，我们来看Less，一种CSS预处理器。Less...
define.less
07-14
常见less封装原子库,包括flex各种封装，外边距常见封装，适合混合原子开发。
less 定义 flex兼容样式
秦璐璐的博客帝国
04-27 926
定义一套flex的 弹性盒兼容 引用之后直接传入参数就可以实现 /* 基本弹性盒子 */ .demo{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-fl...
flex布局
weCat_s的博客
09-09 206
详见 阮一峰老师博客 Flex布局即为弹性盒子布局，采用Flex布局的元素，称为 Flex容器，简称"容器"，它的所有子元素自动成为容器成员，称为 Flex项目，简称 “项目”。 容器的属性： 1.flex-direction 主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿； 2.flex-wrap 换行方式 nowra
移动端适配以及百分比布局与rem比较
幸福的七种颜色的博客
05-25 5431
pc端网站与移动端(手机)网站区别PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放相同点:利用html+css(包括css3)+javascript,pc端性...
CSS常用 Less 公共样式封装
热门推荐
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
12-14 1万+
/------------------------------------- ├ 布局 ┆ └------------------------------------/ // 盒子宽高 .size(@w, @h) { width: @w; height: @h; } // 最小尺寸, 兼容IE6 .min-width(@min-w) { min-width: @min-w; _wi
移动开发入门flex boostrap less
m493096871的博客
06-30 160
flex弹性分布 弹性盒式模型 换行元素 flex-wrap justify-content align-content order用来排序 划分空间 bootstrap 模板 &lt;!DOCTY...
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3453
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
综合运用 vw + Flex + Less 实现B站移动端页面
分享前端技术心得
03-09 838
综合运用 vw + Flex + Less 实现B站移动端页面 目前市面上有两种适配方案比较流行，一是rem，二是vw（未来趋势）。vw的核心概念是将屏幕平分为100份，若屏幕宽度750px，1vw则等于7.5px。VS Code提供了vw相关的插件，意味着不用手动去计算。 下面这个案例的宽高值，全部用vw单位。原插件的setting.json默认数值为750，我这里改成了375，以方便适应B站页面的制作。 最终效果如图所示： 在这里插入代码片 主要分为四个部分，header、nav、content、o
CSS、less、 Sass、
qq_33715850的博客
07-24 332
CSS、less、 Sass、
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
.flexVar(flex-start, flex-start); less语法解释
06-10
这是一个使用 Less 预处理器的 CSS 代码，`.flexVar()` 是一个自定义的 Less 函数，接受两个参数 `flex-start` 和 `flex-start`，分别作为 `justify-content` 和 `align-items` 属性的值，用于设置 Flex 布局容器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值