移动WEB开发之flex布局

最新推荐文章于 2023-07-25 16:33:21 发布
最新推荐文章于 2023-07-25 16:33:21 发布
阅读量199 收藏
点赞数
分类专栏： 笔记 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/110881007
版权

移动WEB开发之flex布局

一、flex布局体验

1、传统布局与flex布局

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				display: flex;
				width: 80%;
				height: 300px;
				background-color: #0099FF;
				justify-content: space-around;
			}
			div span {
				/* width: 200px; */
				height: 150px;
				background-color: pink;
				margin-right: 5px;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>1</span>
			<span>1</span>
		</div>
	</body>
</html>

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

二、布局原理

在这里插入图片描述
在这里插入图片描述

三、flex布局父项常见属性

1、常见父项属性

在这里插入图片描述

2、flex-direction设置主轴的方向

1、主轴与侧轴

在这里插入图片描述

2、属性值

在这里插入图片描述

3、justify-content设置主轴上的子元素排列方式

在这里插入图片描述

			div {
				display: flex;
				width: 80%;
				height: 300px;
				background-color: #0099FF;
				/* justify-content: flex-start; */
				/* justify-content: flex-end; */
				/* justify-content: center; */
				/* justify-content: space-around; */
				justify-content: space-between;
			}
			div span {
				width: 150px;
				height: 100px;
				background-color: purple;
			}

4、flex-wrap元素是否换行

在这里插入图片描述

			div {
				display: flex;
				width: 50%;
				height: 300px;
				background-color: #0099FF;
				/* 默认不换行 */
				/* flex-wrap: nowrap; */
				flex-wrap: wrap;
			}
			div span {
				width: 200px;
				height: 100px;
				background-color: purple;
				margin-right: 10px;
			}

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

5、align-items设置子元素排列（单行）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				display: flex;
				width: 80%;
				height: 300px;
				background-color: #0099FF;
				justify-content: center;
				align-items: center;
			}
			div span {
				width: 150px;
				height: 100px;
				background-color: pink;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>

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

6、align-content设置侧轴上子元素排列方式（多行）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				display: flex;
				width: 600px;
				height: 300px;
				background-color: #0099FF;
				flex-wrap: wrap;
				/* align-content: flex-start; */
				align-content: center;
			}
			div span {
				width: 150px;
				height: 100px;
				background-color: pink;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
	</body>
</html>

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

7、align-items和align-content的区别

在这里插入图片描述

8、flex-flow

在这里插入图片描述

四、子项flex属性使用

1、flex属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section {
				display: flex;
				width: 60%;
				height: 150px;
				background-color: pink;
				margin: 0 auto;
			}

			section div:nth-child(1) {
				width: 100px;
				height: 150px;
				background-color: red;
			}

			section div:nth-child(2) {
				flex: 1;
				background-color: green;
			}

			section div:nth-child(3) {
				width: 100px;
				height: 150px;
				background-color: blue;
			}

			p {
				display: flex;
				width: 60%;
				height: 150px;
				background-color: pink;
				margin: 100px auto;
			}

			p span {
				flex: 1;
			}

			p span:nth-child(2) {
				flex: 2;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
		</section>
		<p>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</p>
	</body>
</html>

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

2、align-self控制子项自己在侧轴上的排列方式

在这里插入图片描述

3、order属性定义项目的排列顺序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

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

4、常见flex布局思路

在这里插入图片描述

5、背景线性渐变

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201209142804102.png?

注意：必须添加浏览器私有前缀-webkit-

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 600px;
				height: 200px;
				background: -webkit-linear-gradient(left,red,blue);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

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

五、案例-携程移动端首页

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

丑小鸭变黑天鹅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web flex上传
05-13
java web jsp flex 文档上传 js 及 实例
移动web开发实例flex布局案例源码
02-16
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
移动web开发之flex布局
Better_Xing的博客
02-11 554
01.flex布局体验 1.1传统布局与flex布局 1.2初体验 02.flex布局原理 2.1布局原理
web flex
weixin_60987286的博客
12-24 90
之前我看黑马的视频，里面没有讲到flex这个属性，都不知道这个很重要，感觉它可以代替浮动
flex
09-23 89
地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 例子::运行后看效果 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <ti...
【Web】Flex布局
WHUZXQ的博客
08-30 530
转自：http://ife.baidu.com/note/detail/id/952 Flex布局是什么？ W3C针对布局设计的新标准，相对float和position会更加灵活处理父元素和子元素之间布局关系，让布局更加直观和灵活简单。有效的针对不同屏幕宽度大小的情况下，让元素自动有效合理处理布局结构。 适用范围 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针
弹性布局-flex布局.zip
05-18
总之，Flex布局是现代移动Web开发不可或缺的一部分，它大大简化了复杂布局的设计，提高了响应式页面的实现效率。熟练掌握Flex布局，能帮助开发者更好地适应不同设备和屏幕尺寸的需求，构建出优雅且适应性强的网页...
移动web开发-rem布局案例源码，html+css素材
02-16
在移动Web开发中，REM（Root EM）布局是一种常见的响应式设计策略，它允许开发者以相对于根元素（通常是html元素）的字体大小来设置元素的尺寸。这种布局方式能够确保在不同屏幕尺寸和设备上提供一致的视觉体验，...
Ctrip（flex布局）.zip
04-18
在实际开发中，理解并熟练掌握Flex布局是构建现代Web应用的关键技能，能有效提高开发效率和代码可维护性。通过学习和实践"flex布局仿写携程移动端页面"的例子，开发者可以进一步加深对Flex布局的理解，并将其运用到...
移动web开发之流式布局及案例练习.docx
11-27
移动Web开发中的流式布局是构建适应不同设备屏幕尺寸的网页设计的关键技术。在传统的Web开发中，元素的宽度计算通常包括CSS设置的width、border和padding，这在固定宽度的布局中工作良好。然而，随着移动设备的普及...
java web flex_flex + java web 整合
weixin_30094815的博客
02-12 149
环境：MyEclipse 8.5 ， flex4 ，BlazeDS (版本为：3.2.0.3978)，服务器tomcat6.0环境搭建：一开始我用的是flex3，后来看网上的帖子说对于MyEclipse 8.5来说flex4 更有优势。插件安装没有什么要注意的，只是后面有一步要选择MyEclipse目录的地方注意一下就可以了。要用到BlazeDs 的war包 只要把它下下来 解压一下就好这里没怎...
移动web Flex布局
Aisukola的博客
07-21 103
flex它是一种布局方式。主要目的是通过父盒子控制子盒子如何排列，一定是亲爸爸和亲儿子。
移动web-flex布局
qq_52822043的博客
03-14 437
目录 1. flex布局原理 1)flex 2)flex container 原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 2. flex布局父项常见属性 1)flex-direction 设置主轴的方向 2)justify-content 设置主轴上的子元素排列方式 3)flex-wrap 设置子元素是否换行 4)align-content 设置侧轴上的子元素排列方式（多行） 5)align-item 设置侧轴上的子元素排列方式（单行） 6)flex-fl..
移动web之Flex布局
最新发布
qq_46601384的博客
07-25 215
2、align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；flex-flow 属性是flex-direction 和 flex-wrap属性的复合属性。注意：主轴和侧轴会变化的，取决于flex-direction设置谁为主轴，剩下的便是侧轴。设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。浮动能实现效果，但是Flex布局在实现前者功能的前提下，还能够避免浮动脱离文档流的问题。
JavaWeb——flex布局
mxyjsu2021的博客
05-10 671
数值越小，排列越靠前，默认为0section{width: 60%;flex: 1;order: -1;
移动web开发_flex布局
weixin_45513733的博客
01-27 183
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活
移动WEB开发flex布局
czx1826488201的博客
11-03 164
1. flex布局体验 2. flex布局原理 2.1 布局原理 flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 注意： 1）当我们为父盒子设为flex布局以后，子元素的float，clear 和vertical-align属性失效. 2）伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性和布局 = flex...
web开发之flex布局
温大侠的博客
06-17 1357
flex是web开发中常用的布局方式,常用于移动端,通过给父标签添加display: flex属性来设置子标签的排列方式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> div { display: flex; width: 800px; back
Web前端培训：flex布局中父元素常用属性总结
zy1992As的博客
12-06 469
flex 弹性布局操作方便、布局极为简单，所以在适合移动端WEB应用。flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。flex布局父项常见属性有以下七种，掌握它们可以使你在后续的学习和开发中十分必要。以下由6个属性是对父元素设置的flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行 ? align-content：设置侧轴上的子元
移动Web开发总结：自适应布局与性能优化
移动Web开发是针对手机和平板等移动设备的网页设计和开发。在PC端，通常使用固定布局，但在移动端，由于屏幕尺寸的多样性，固定布局不再适用，因此需要采用更适合自适应的布局方式。 1. **流体布局与Flex布局** - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值