【HTML5】弹性盒子实现导航栏和留言框

一只爱打拳的程序猿

于 2022-11-23 07:00:00 发布

阅读量3.9k

点赞数 38

分类专栏： HTML5+CSS 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/weixin_64916311/article/details/127966461

版权

调CSS就像上方那样，代码逐渐变得扭曲，情绪逐渐变得暴躁。

前言：

大家好，我是拳击哥。在我们日常生活中，我们点击一个网页PC端显示的是一个状态用手机看是另外一种状态，这时候需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。那么这时候我们可以用到弹性盒子。下面我就来讲解弹性盒子的各个属性用法。

我任意打开一个网站，PC端显示时，我拖动检查框发现整个页面只能显示一半。那如果不进行弹性设置，当PC端的尺寸应用到手机上的时候，手机上显示的也是页面的一半。

当我切换切换设备为手机端后，我把检查框往左拖动发现页面随着尺寸自适应生成了适合屏幕的大小，这就是弹性盒子的用法。

以上页面只是随机查找的，里面的功能不一定是使用弹性盒子。但我想告诉大家的是弹性盒子能使一个网页在PC端显示一种状态，在手机端显示根据PC端自适应生成适合手机端的状态。我们可以这样理解大屏显示是什么样子，小屏显示是什么样子。这样就不难理解了。

弹性盒子的核心属性

外层容器里面有三个弹性项：

由弹性容器(Flex container)和弹性子元素(Flex item)组成
通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器
包含了一个或多个弹性子元素

1、display设置元素生成框

我们需要将显示函数display设置成flex，display属性是规定元素生成框是什么样的类型的，比如我要设置成flex弹性盒子我可以这样做：display:flex。

如以下程序：

    <style>
		.test 
		{
			display: flex;
		}
    </style>
	<div class="test">测试</div>

2、弹性盒子比例划分

flex-grow 放大
flex-shrink 缩小
flex-basis 自然宽度
flex-wrap 换行

今天我们讲常用的三个属性：flex-grow 放大、flex-shrink 缩小、flex-basis 自然宽度。

2.1flex-basis基本宽度

我设置父类宽度为400px，四个“孩子”的基本宽度分别为10px、50px、100px、120px。这些px是什么呢？就是四个“孩子”各自盒子占的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<style>
		.box {
			width: 400px;
			height: 50px;
			display: flex;
			flex-direction:row;	
			flex-grow: ;
			background-color: whitesmoke;
		}
		.test {
			height: 50px;
		}
		.test:nth-child(1) {
            width: 10px;
			background: red;
		}
		.test:nth-child(2) {
			width: 50px;
			flex-basis: auto;
			background: skyblue;
		}
		.test:nth-child(3) {
			width: 100px;
			flex-basis: auto;
			background: green;
		}
		.test:nth-child(4) {
			width: 120px;
			flex-basis: auto;
			background: palegreen;
		}
	</style>
	<div class="box">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test">3</div>
	<div class="test">4</div>
	</div>
	</body>
</html>