文档章节

flex布局-答题提问标题的布局

蓝小驴
 蓝小驴
发布于 03/08 09:57
字数 450
阅读 0
收藏 0

描述:

布局分为三列。中间随内容高度的增加而增加,左右两边始终在顶部位置不变,当中间内容为一行时,看起来也会是一个居中的状态。

原理:

整体用flex布局,先保持在一行,左右两侧设置最小宽度撑开,中间内容用 flex:1 撑满一行。

 

HTML代码部分: 

<ul>
	    	<li>
				<span class="left">1</span>
				<div class="center">
						内容内容内容内容内容内容内容
						内容内容内容内容内容内容内容
						内容内容内容内容内容内容内容
						内容内容内容内容内容内容内容
						内容内容内容内容内容
				</div>
				<div class="right">
					内容内容
				</div>
	    	</li>
	    </ul>

 

CSS代码部分: 

ul{

			}
			ul li{
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				align-items: center;
				padding: .2rem 0;
				margin-bottom: .1rem;

			}
			ul li .left{
				text-align: center;
				line-height: 1.4;
				min-width: 1rem;
				align-self: flex-start;

			}
			ul li .center{
				-webkit-flex: 1;
				-moz-flex: 1;
				-ms-flex: 1;
				-o-flex: 1;
				flex: 1;
				line-height: 1.4;
			}
			ul li .right{
				min-width: 1rem;
				line-height: 1.4;
				align-self: flex-start;
				text-align: center;

				
			}

JS代码部分(因为用了手机rem布局,刚进来时会根据手机的屏幕设置根html的字体,从而让页面内设置了rem单位的元素适配至合理的大小):

 

 <script type="text/javascript">
	(function (doc, win) {
	        var docEl = doc.documentElement,
	            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	            recalc = function () {
	                var clientWidth = docEl.clientWidth;
	                if (!clientWidth) return;
	                if(clientWidth>=750){
	                    docEl.style.fontSize = '100px';
	                }else{
	                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
	                }
	            };
	
	        if (!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
	</script> 

 

 

 

© 著作权归作者所有

蓝小驴
粉丝 0
博文 17
码字总数 3699
作品 0
广州
私信 提问
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear
2018/05/29
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
64
0
使用 Flex 布局与其他普通布局的简单对比

最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局: 利用 float 属性 在使用 flex 之前,实...

Gwokhov
2018/12/08
0
0
React Native基础&入门教程:初步使用Flexbox布局

一、长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示“与设备像素密度无关的逻辑像素点”。 这个怎么理解呢? 我们知道,屏幕...

powertoolsteam
2018/07/04
0
0
高级前端的进阶——css之flex

CSS flex 前言: 1. 初识 flex flex 是 flexible 的缩写,意思为弹性布局,用来为盒模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局( 包括行内元素 ): 元素设置 flex 属性后,其...

了不起的Rick
03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
47分钟前
3
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
49分钟前
5
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
57分钟前
5
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
今天
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部