Flex初探

最新推荐文章于 2025-09-06 15:35:36 发布

转载最新推荐文章于 2025-09-06 15:35:36 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/idaren/blog/612740

文章标签：

#javascript #ViewUI

本文介绍了一个使用Flex布局实现的简易计算器示例。通过CSS的Flex布局特性，实现了计算器界面的灵活布局，包括屏幕显示区、按钮排列等功能。该示例还包含了JavaScript交互代码，能够进行基本的数学运算。

为什么80%的码农都做不了架构师？>>>

flex模型

容器属性

属性名	默认值
flex-direction （决定主轴的方向）	row （→）	row-reverse （←）	column（↓）	column-reverse（↑）
flex-wrap （如何换行）	nowrap（不换行）	wrap 换行举例：123456 789	wrap-reverse 换行举例：789 123456
flex-flow （以上两个属性的缩写）	row nowrap
justify-content （项目在主轴上的对齐方式）	flex-start 左对齐	flex-end 右对齐	center 居中	space-between 两端对齐	space-around 对齐时每个项目间隔相等
align-items （项目在交叉轴上的对齐方式）	stretch 如果项目未设置高度或设置为auto则将占满整个容器高度	flex-start 左对齐	flex-end 右对齐	center 居中	baseline 以项目的第一行文字的基线对齐
align-content （项目有多行时各行的分布）	stretch 如果项目未设置高度或设置为auto则将占满整个容器高度	flex-start flex-end center	space-between space-around

项目属性

属性名	属性说明	属性值
order	定义项目的排列顺序。数值越小，排列越靠前，默认为0	integer
flex-grow	项目的放大比例，默认为0，如果存在剩余空间，不放大	integer
flex-shrink	项目的缩小比例，默认为1，如果空间不足，项目将缩小	integer
flex-basis	分配多余空间之前项目的main-size，默认值为auto
flex	以上flex-grow,flex-shrink,flex-basis的缩写，默认为 0 1 auto
align-self	设置与其他项目不一样的对齐方式，默认时为container的aligin-item	使用align-item的值

参考文章： Flex 布局教程：语法篇

align-content

练习：简易计算器

效果：

代码：

<!DOCTYPE html>
<html>
<head>
	<title>TEST05</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<style type="text/css">
	#box{
		width: 300px;
		height: 420px;
		padding: 10px;
		margin: 30px auto;
		border: 1px solid gray;
		border-radius: 10px;
		box-shadow: 2px 2px 10px;
		/*flex*/
		display: flex;
		align-items: center;
		/*项目垂直居中*/
		justify-content: space-around;
		/*项目水平居中*/
		flex-wrap: wrap;
		/*设置为换行*/
	}
	#screen{
		width: 280px;
		background: rgb(147, 137, 162);
	}
	#first_row,#second_row{
		width: 270px;
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		text-align: right;
	}
	#cent{
		width: 280px;
	}
	#number{
		width: 280px;
		height: 300px;
		/*flex*/
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		/*按钮有多行，使行与行之间平均分布*/
	}
	.butt{
		width: 60px;
		height: 60px;
		font-size: 20px;
		box-shadow: 1px 1px;
	}
	</style>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
<body>
<div id="box">
	<div id="screen">
		<div id="first_row">0</div>
		<strong><div id="second_row">0</div></strong>
	</div>
	<div id="cent"><button>归零</button></div>
	<div id="number">
		<input type="button" value="1" class="butt">
		<input type="button" value="2" class="butt">
		<input type="button" value="3" class="butt">
		<input type="button" value="+" class="butt">
		<input type="button" value="4" class="butt">
		<input type="button" value="5" class="butt">
		<input type="button" value="6" class="butt">
		<input type="button" value="-" class="butt">
		<input type="button" value="7" class="butt">
		<input type="button" value="8" class="butt">
		<input type="button" value="9" class="butt">
		<input type="button" value="*" class="butt">
		<input type="button" value="." class="butt">
		<input type="button" value="0" class="butt">
		<input type="button" value="=" class="butt">
		<input type="button" value="/" class="butt">
	</div>
</div>
</body>
<script type="text/javascript">
$(function(){
	var justNum = false;
	var $first = $("#first_row");
	var $second = $("#second_row");
	var calculate = "";
	$(".butt").click(function(){
		var value = $(this).val();
		if(value == "="){
			$second.html(eval(calculate));
		}else{
			if(justNum){
				if(!isNaN(value)){
					justNum = false;//若用户输入的是数字，则接下来可以输入符号或者数字
					calculate = calculate + value;
				}
			}else{
				if(isNaN(value)){
					justNum = true;//若用户输入的是符号，则接下来只能输入数字
				}
				calculate = calculate + value;
			}
			$first.html(calculate);
		}
	})

	$("#cent").click(function(){
		$first.html("0");
		$second.html("0");
		calculate = "";
	})
})
</script>
</html>

转载于:https://my.oschina.net/idaren/blog/612740