手机端布局页面写法

于 2023-10-23 14:59:05 发布
阅读量95 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoruijun_2012_4/article/details/133990400
版权 
<!DOCTYPE html>
<head>
    <title>服装定制流程</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Theme CSS -->  
    <link href="layui/css/layui.css" rel="stylesheet">
    <style>
		body {
			touch-action: pan-y;
		}
		#table1 {
			border-collapse: collapse;
			width: 90%;
			margin: 0 auto;
	
		}
		#table1 td {
			border: 0px solid #ccc;
			padding: 2px;
	
		}
		
		#table2 {
			border-collapse: collapse;
			width: 85%;
			margin: 0 auto;
			text-align:center;
		}
		#table2 td {
			border: 1px solid #ccc;
			padding: 10px;
			text-align: center;
		}
		img{
			border-radius:50%;
  			margin: 0 auto;
		}
        .steps-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .step {
            position: relative;
            /*width: 100%;*/
            padding-bottom: 20px;
            padding-left: 70px; /* 圆点左侧的间距 */
        }
        .step.active .step-circle {
            background-color: teal;
            color: #fff;
        }
        .step-line {
            position: absolute;
            top: 0;
            left: 20px; /* 线条左侧的位置 */
            width: 2px;
            height: 100%;
            background-color: #ddd;
            z-index: -1; /* 线条位于圆点下方 */
        }
        .step:last-child .step-line {
            display: none; /* 最后一个步骤不需要线条 */
        }
        .step-circle {
            position: absolute;
            left: 0;
            top: 20px;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            text-align: center;
            font-size: 14px;
            color: #333;
        }
        .step.active .step-circle {
            background-color: teal;
            color: #fff;
        }
	</style>
</head> 
<body>
	<table id = "table1">
		<tr>
		<td rowspan="3" align="center"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="70px" height="70px";  /></td>
		<td>蒙古穿婚纱布里亚特风</td>
		</tr>
		<tr>
		<td>客户:乌里雅苏</td>
		</tr>
		<tr>
		<td>微信:13009502995</td>
		</tr>
		</table>
		<table id = "table2">
		<tr>
		<td >身高</td>
		<td >体重</td>
		<td >体重</td>
		</tr>
		<tr>
		<td >身高</td>
		<td >体重</td>
		<td >体重</td>
		</tr>
		<tr>
		<td >身高</td>
		<td >体重</td>
		<td ><a href="" style="color: red;">更多参数>></a></td>
		</tr>
		</table>
		<br></br>
      <div class="steps-container">
        <div class="step">
	        <div class="step-line"></div>
	        <div class="step-circle">1</div>
			<h2 class="sub-title" style = "color: black;"> &nbsp; 导购接单</h2>
			<br></br>
	            <div>
		            <p style="font-size: 20px;">
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="郭丙强" />郭丙强
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="于利"/>于利
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="测试1"/>测试1
		            </p>
				</div>
				<br></br>
		</div><!--//steps-->
        <div class="step">
	        <div class="step-line"></div>
	        <div class="step-circle" style="background-color: red;">2</div>
			<h2 class="sub-title" style = "color: black;"> &nbsp;裁剪派单</h2>	
			<br></br>	
				<div>
			        <p style="font-size: 20px;">
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="郭丙强" />郭丙强
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="于利"/>于利
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step01" value="测试1"/>测试1
		            </p>
				</div>
				<br></br>
		</div><!--//steps-->
        <div class="step">
	        <div class="step-line"></div>
	        <div class="step-circle" >3</div>
			<h2 class="sub-title" style = "color: black;"> &nbsp;缝纫派单</h2>		
			<br></br>
				<div>
			        <p style="font-size: 20px;">
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="刘金萍" />刘金萍
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="付丽云" />付丽云
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="惠建芳" />惠建芳
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="张爱玲" />张爱玲
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="张俊芳" />张俊芳
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="陈润红" />陈润红
		                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
		                <input type="checkbox" name="step02" value="测试2" />测试2
		            </p>
				</div>	
				<br></br>
		</div><!--//steps-->
        <div class="step">
	        <div class="step-line"></div>
	        <div class="step-circle" >4</div>
			<h2 class="sub-title" style = "color: black;"> &nbsp;钉扣派单</h2>	
			<br></br>
			<div>
		        <p style="font-size: 20px;">
	                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
	                <input type="checkbox" name="step03" value="Lkhagvasuren" />Lkhagvasuren
	                <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
	                <input type="checkbox" name="step03" value="测试3" />测试3
	            </p>
			</div>
			<br></br>	
		</div><!--//steps-->
        <div class="step">
	        <div class="step-line"></div>
	        <div class="step-circle" >5</div>
	        <h2 class="sub-title" style = "color: black;"> &nbsp;质检派单</h2>
	        <br></br>
	        <div>
			  <p style="font-size: 20px;">
	            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
	            <input type="checkbox" name="step04" value="那日苏" />那日苏
	            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
	            <input type="checkbox" name="step04" value="测试4" />测试4
              </p>
			</div>	
		</div><!--//steps-->	
      </div><!--//steps-container-->
      <div style="text-align: center;">
         <button type="button"  onclick="getCheckBox()" style="font-size: 20px; height:50px ;width: 100%; background-color: red;">确定派单</button>
      </div> 
</body>
    <!-- Javascript -->
    <script src="layui/layui.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>   
    <script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>   
    <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>     
    <script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script> 
    <script type="text/javascript" src="assets/plugins/prism/prism.js"></script>    
    <script type="text/javascript" src="assets/js/main.js"></script>  
     <script>
		  function workFlowView(){
			  window.open("http://39.104.17.29:7077/strutsJspAjax/index002.html");
		  }
		 function getCheckBox(){
	        var arr = new Array();    
	        var arr01 = new Array();                
	        var items = document.getElementsByName("step01");   
	        for (i = 0; i < items.length; i++) {                    
	            if (items[i].checked) {                   
	                arr01.push(items[i].value);
	                arr.push(items[i].value);                       
	            }                
	        } 
	        if(arr01.length==0){
				alert("请选择第一步中的人员");
				return;
			}
	        var arr02 = new Array();                
	        var items = document.getElementsByName("step02");   
	        for (i = 0; i < items.length; i++) {                    
	            if (items[i].checked) {                   
	                arr02.push(items[i].value);
	                arr.push(items[i].value);                       
	            }                
	        } 
	        if(arr02.length==0){
				alert("请选择第二步中的人员");
				return;
			} 
			var arr03 = new Array();                
	        var items = document.getElementsByName("step03");   
	        for (i = 0; i < items.length; i++) {                    
	            if (items[i].checked) {                   
	                arr03.push(items[i].value);
	                arr.push(items[i].value);                       
	            }                
	        } 
	        if(arr03.length==0){
				alert("请选择第三步中的人员");
				return;
			} 
			var arr04 = new Array();                
	        var items = document.getElementsByName("step04");   
	        for (i = 0; i < items.length; i++) {                    
	            if (items[i].checked) {                   
	                arr04.push(items[i].value);
	                arr.push(items[i].value);                       
	            }                
	        } 
	        if(arr04.length==0){
				alert("请选择第四步中的人员");
				return;
			} 

        let that=this
        
        let url = window.location.href
        //let url = "http://www.menggu100.com:7077/strutsJspAjax/index001.html?orderIdByGrj=202308354657941354008000";
        let p=url.split('?')[2]
        let params=new URLSearchParams(p)
        params.get('orderNo');

       			            
        $.ajax({
				type:"post",
				url:"SendOrderAction?method=excuteAjax&personNames="+arr.toString()+"&orderNo="+params.get('orderNo'),
				data:{//设置数据源
				},
				dataType:"json",//设置需要返回的数据类型
				success:function(data){
					var returnWebData = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
					if(returnWebData.order_no=="yes"){
                       alert("已下发派遣任务！");
					}else if(returnWebData.Warning=="insertSuccess"){
	                   alert("下发派遣任务成功！");
					}else{

					}
				},
				error:function(){
					//alert("系统异常，请稍后重试！");
				}//这里不要加","
			});
        };
       
        
        layui.use(function(){
            var layer = layui.layer;
            var util = layui.util;
            // 事件
            util.on('lay-on', {
                "test-confirm01": function(){
                        layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
                          
                        }, function(){
                            
                        });
                },
                "test-confirm02": function(){
                    layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
                       
                    }, function(){
                        
                    });
                },
            })
        });
    </script>     
</body>
</html>

下面一行关键代码 的写法，适应于手机布局

<meta name="viewport" content="width=device-width, initial-scale=1.0">
guoruijun_2012_4
关注
Web笔记之移动端开发
Mr__Zhang___的博客
04-17 1897
1、移动端基础 ①浏览器现状 说明：国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 ②手机屏幕现状 ● 移动端设备屏幕尺寸非常多，碎片化严重。 ● Android设备有多种分辨率∶......
手机端html三栏式布局,CSS经典三栏布局方案
weixin_36463292的博客
06-28 484
1. float布局最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}此时可以得到左右两栏分布：这里...
html写前端手机页面,前端编写手机兼容页面（简易方式）
weixin_42443651的博客
06-03 2649
HTMLCSSHTML5CSS3前端编写手机兼容页面(简易方式) 这两天开始编写手机页面，作为类似官网一样的使用，因为实在手机端访问的web端，没有做过尝试，而且由于手机的种类很多，导致兼容性要求很高，在网上找了一些教程，制作完毕后决定分析给大家。先给大家看下成品效果图：这就是手机访问之后的样子了，那具体怎么做好兼容，又能省事省力呢，我从网上找到了这个框架：直接百度：ydui...
HTML5教程之移动端Web页面布局
delishcomcn的博客
09-15 2049
随着科技的进步，及人们日常生活节奏的加快，我们通常花费在手机等移动设备上的时间比使用电脑的时间越来越多，为了适应市场及用户的转变，越来越多的服务从PC端转向移动端，就导致移动端有着强大的发展前景和巨大的市场，作为一个Web高级前端开发工程师，移动端页面布局也成了我们必须掌握的技能之一。% 根据父元素的尺寸进行计算;但是，浏览器也就是viewport的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport的宽度。
手机端常见兼容问题
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-29 5644
1、在写手机端时必要需要加入meta &lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"&gt; // （width=device-width）， // 初始缩放比例（initial-scale=1）为......
html5写一个简单的手机app的设置界面
lanseguhui的博客
06-09 2万+
&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;me
PC端移动端页面样式适配 响应式布局经验
Aria233的博客
05-04 1674
响应式布局 响应式布局是根据页面的分辨率来决定用什么样式展示内容。通过媒体查询@media的方式可以设置不同页面尺寸下的样式。 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 示例 @media screen and (max-width: 424px) {} // 普通手机屏幕 @media screen and (min-width: 425px) and (max-width: 767px) {} // 普通平板屏
vue单页面实现pc移动端页面不同
05-19
Vue.js，作为一款流行的前端框架，提供了一种高效的方法来实现单页面应用（SPA）对不同设备的适配。本篇将详细介绍如何使用Vue.js实现PC和移动端页面的差异化展示。 首先，理解问题的核心：我们希望一个Vue项目能在...
移动端页面布局方式，简单记录一下
weixin_55935744的博客
12-01 4143
目录1、视口2、多倍图3、移动端开发选择4、移动端技术解决方案5、移动端常见布局6、流式布局7、flex弹性布局①flex与传统布局比较②flex布局原理③常见父项属性8、rem适配布局①rem基础②媒体查询③Less基础④rem适配方案 1、视口 视口就是浏览器显示页面=内容的屏幕区域 视口分为布局视口、视觉视口、理想视口 ①三种视口介绍 （1）布局视口（了解） 用于早期的PC端页面在手机上显示的问题 这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般
手机端响应式解决方案-rem布局
muyphycx的博客
02-20 2027
今天分享一段代码，用于解决手机端响应式布局。 在开发手机端页面时经常用到。 只需在页面引入这段原生js代码就可以了(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
手机端自适应页面通用CSS及公用HTML写法
斌记-关于WEB前端、小程序、UI设计的笔记
07-21 1万+
把页面的通用属性全部写出来。 所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。 js中规定了页面最大宽度。为16rem。所以width：16rem；就等于width：100%； 我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。 rem写法好处是，自适应手机屏，手机屏不管是大小，都完美显示，不会错位。 相比用百分比写法，rem写法计算相对简单。 ...
手机端页面制作
Shron_mx的博客
08-30 2351
ppi 像素密度 – 每英寸显示的像素点的个数 ppi = 开平方(物理像素width的平方 + 物理像素height的平方) / 英寸
手机端网页所有内容根据屏幕大小自适应(大小，位置)
热门推荐
liyede2008的博客
10-12 5万+
手机端和PC端网页的百分百自适应
html5写手机端页面
BBC12的博客
09-01 5333
众位大神，有没有使用html5，以Bootstrap框架为核心来写手机端页面的资料？希望得到大家帮助！！！ 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Mar...
如何用手机测试自己写的web页面
weixin_34390105的博客
06-11 628
　　手机测试自己写的web页面方法有很多，在这里稍微介绍一种，步骤如下　　1 首先安装软件phpstudy,安装后打开如图　　　　2 启动phpstudy　　　　3 启动成功后，如图所示(注意：如果此处两个点没有变成绿色表示环境有些问题)　　　　4 电脑开启wifi ,然后手机连上电脑的wifi，这一点很重要哦 (注意：保证手机和电脑在同一个局域网下)　　5 phpstydy安装后，找到安装路径...
手机页面设计注意事项
weixin_30858241的博客
11-05 189
XHTML部分 大多数手机不支持的： 表单元素的“disable”属性 部分手机不支持的： “button”标签 “input[type=file]“标签 “iframe”标签。 虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。 少数手机不支持的： “select”标签：该标签如果被赋予比较...
如何开发手机端网页，如何让网页自适应？
hahhahahaa的博客
07-03 1万+
工具/原料一个浏览器方法/步骤先看一个简单的网页代码&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"/&gt;&lt;/head&gt;&lt;body&gt;hello 我不是自适应网页&lt;/body&gt;&lt;/html&gt;在PC电脑端的实现效果如图在移动端的实现效果如图很明显，当在移动端上显示时，它仍然是按照，p
HTML5移动端手机网站开发流程
追随内心
03-04 4万+
最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。 段亮觉得有以下几点： 一、没有完整的思路和流程 就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思
flex 布局的各类写法
最新发布
04-29
Flexbox 是 CSS3 中的一种新的布局模式，它可以使容器中的子元素能够自动地排列，并且能够根据容器的大小调整元素的尺寸和位置。Flexbox 布局非常灵活，可以应用于很多场景，比如网站导航菜单、相册、表单等。 Flexbox 布局有以下几种写法： 1. 容器属性法：通过设置容器的 display 属性为 flex 或 inline-flex 来启用 Flexbox 布局。 ```css .container { display: flex; } ``` 2. 项目属性法：通过设置子元素的 flex 属性来控制其在容器中的排列方式。 ```css .item { flex: 1; /* 项目占据剩余空间的比例 */ } ``` 3. 弹性盒子法：通过将子元素的 display 属性设置为 flex 或 inline-flex 来将其转换为弹性盒子。 ```css .item { display: flex; } ``` 4. flex-direction 属性：通过设置容器的 flex-direction 属性来指定项目的排列方向。 ```css .container { flex-direction: row | row-reverse | column | column-reverse; } ``` 5. justify-content 属性：通过设置容器的 justify-content 属性来控制项目在主轴上的对齐方式。 ```css .container { justify-content: flex-start | flex-end | center | space-between | space-around; } ``` 6. align-items 属性：通过设置容器的 align-items 属性来控制项目在交叉轴上的对齐方式。 ```css .container { align-items: flex-start | flex-end | center | baseline | stretch; } ``` 7. align-self 属性：通过设置子元素的 align-self 属性来控制其在交叉轴上的对齐方式。 ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ``` 8. order 属性：通过设置子元素的 order 属性来指定其在容器中的排列顺序。 ```css .item { order: <integer>; } ``` 以上就是 Flexbox 布局的各种写法，如果您还有其他问题或需要更详细的解释，请告诉我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值