【CSS3】-伸缩布局盒模型实现 3列等高布局

最新推荐文章于 2023-08-29 07:27:48 发布
最新推荐文章于 2023-08-29 07:27:48 发布
阅读量4.8k 收藏 5
点赞数 1
分类专栏： CSS3 css 文章标签： css3 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhuxmen/article/details/51274961
版权
css 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
CSS3
2 篇文章 1 订阅
订阅专栏

学习书目：大漠---《图解CSS3-核心技术与案例实战》

一、CSS3引入了Flexbox盒模型，其功能主要有：

1、屏幕和浏览器创库大小发生改变也可以灵活调整布局；

2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调整伸缩项目大小；

3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间分配到伸缩项目之前、之后或之间；

4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

5、控制元素在页面上的布局方向；

6、按照不同于DOM文档流所指定顺序对屏幕上的元素重新排序。

二、Flexbox的不同版本

旧版本：使用display:box;display:inline-box;

混合版本：display:flexbox;display:inline-fexbox;

新版本：display:flex;display:inline-felx

三、伸缩容器的属性（不同版本对比）

通过display属性显示的个一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器；当一个元素变成了伸缩容器，其子元素会自动变成伸缩项目。

将一个元素设置成伸缩容器：

旧版本：

div{
    display: -webkit-box;/*旧版本，ios6-，Safari 3.1-6*/
    display: -moz-box;/*旧版本，Firefox 19-*/
}

混合版本：

div{
    display: -ms-flexbox;/*混合版本，IE10*/
}

新版本：

div{
    display: -webkit-flex;/*新版本：Chrome*/
    display: flex;/*新版本：Opera 12.1,Firefox 20+*/
}

伸缩容器的属性主要有：

1、伸缩流方向：是指伸缩容器主轴方向，其决定了伸缩元素放置在伸缩容器的方向。

2、伸缩行换行：主要用来设置伸缩容器的伸缩项目是单行还是多行显示，以及决定侧轴的方向

3、伸缩方向与换行：是伸缩流方向与伸缩行换行的结合物，即两者的缩写

     div{
        /*伸缩项目换行*/
	/*旧版本：设置伸缩流*/
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-orient: normal;
	/*旧版本：设置项目换行*/
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	/*混合版本：伸缩流方向与伸缩项目换行*/
	-ms-flex-flow: column wrap;
	/*新版本：伸缩流方向与伸缩项目换行*/
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
      }


4、主轴对齐：用来设置伸缩容器当前伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间

旧版本：box-pack:start /end/ center/ justify

混合版本：flex-pack: start/end/center/justify/distribute

新版本：justify-content: flex-start/flex-end/center/ space-between/space-around

div{
-webkit-box-pack: center;/*旧版本*/
	-moz-box-pack: center;/*旧版本*/
	-ms-flex-pack:center;/*混合版本*/
	-webkit-justify-content:center;/*新版本*/
	justify-content: center;/*新版本*/
}

5、侧轴对齐：用来设置侧轴的对齐方式

旧版本：box-align:start/end/center/baseline/stretch

混合版本：flex-align: start/end/center/baseline/stretch

新版本：align-items: flex-start/flex-end/center/baseline/stretch

div{
-webkit-box-align: center;/*旧版本*/
	-moz-box-align: center;/*旧版本*/
	-ms-flex-align: center;/*混合版本*/
	-webkit-align-items: center;/*新版本*/
	align-items: center;/*新版本*/
}

6、堆栈伸缩行：控制伸缩项目行在布局轴的堆放方式

四、伸缩项目的属性

伸缩项目是伸缩容器的子元素，伸缩容器中的文本也被视为一个伸缩项目

1、显示顺序，改变伸缩项目在页面中的显示顺序

旧版本: box-oriental-group: 数字

混合版本：flex-order: 数字

新版本：order:数字

默认值为1，按照大小顺序先后显示，拥有相同数字的按照DOM流中出现的先后顺序显示

div{
	-webkit-box-ordinal-group: 3;/*旧版本*/
	-moz-box-ordinal-group: 3;/*旧版本*/
	-ms-flex-order: 3;/*混合版本*/
	-webkit-order: 3;/*新版本*/
	order: 3;/*新版本*/
}

2、伸缩性，能够灵活的控制伸缩项目在伸缩容器中的显示空间。

旧版本：box-flex:number

混合版本：flex：

新版本：flex：

div{
	-webkit-box-flex: 1;/*旧版本*/
	-moz-box-flex: 1;/*旧版本*/
	-ms-flex: 1;/*混合版本*/
	-webkit-flex: 1;/*新版本*/
	flex: 1;/*新版本*/
}

实战：跨浏览器的三列布局

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>跨浏览器的三列布局</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header>我是页眉</header>
	<section>
		<article>我是主内容</article>
		<nav>我是导航</nav>
		<aside><p>我是右边栏</p></aside>
	</section>
	<footer>我是页脚</footer>
</body>
</html>

CSS文件

style.css

*{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
	background: #fff;
}
body{
	width:100%;
	/*设置body为伸缩容器*/
	display: -webkit-box;/*旧版本，ios6-，Safari 3.1-6*/
	display: -moz-box;/*旧版本，Firefox 19-*/
	display: -ms-flexbox;/*混合版本，IE10*/
	display: -webkit-flex;/*新版本：Chrome*/
	display: flex;/*新版本：Opera 12.1,Firefox 20+*/
	/*伸缩项目换行*/
	/*旧版本：设置伸缩流*/
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-orient: normal;
	/*旧版本：设置项目换行*/
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	/*混合版本：伸缩流方向与伸缩项目换行*/
	-ms-flex-flow: column wrap;
	/*新版本：伸缩流方向与伸缩项目换行*/
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
}
section{
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	/*设置section为伸缩容器*/
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	/*伸缩项目换行*/
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-ms-flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	/*设置伸缩性*/
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
article{
	border:1px solid black;
	margin-left: 2%;
	margin-right: 2%;
	vertical-align: middle;
	-webkit-box-flex: 1;/*旧版本*/
	-moz-box-flex: 1;/*旧版本*/
	-ms-flex: 1;/*混合版本*/
	-webkit-flex: 1;/*新版本*/
	flex: 1;/*新版本*/
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
	/*文字水平垂直居中*/
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	/*水平居中*/
	-webkit-box-pack: center;/*旧版本*/
	-moz-box-pack: center;/*旧版本*/
	-ms-flex-pack:center;/*混合版本*/
	-webkit-justify-content:center;/*新版本*/
	justify-content: center;/*新版本*/
	/*垂直居中*/
	-webkit-box-align: center;/*旧版本*/
	-moz-box-align: center;/*旧版本*/
	-ms-flex-align: center;/*混合版本*/
	-webkit-align-items: center;/*新版本*/
	align-items: center;/*新版本*/
}
aside{
	width:25%;
	border:1px solid black;
	display: flex;
	display: -webkit-flex;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-box-align:center;
	-moz-box-align:center;
	box-align:center;
	-webkit-box-pack: center;
	-moz-box-pack:center;
	box-pack:center;
	-webkit-justify-content: center;
	justify-content: center;
	align-items: center;
	-webkit-align-items:center;
	-webkit-box-ordinal-group: 3;/*旧版本*/
	-moz-box-ordinal-group: 3;/*旧版本*/
	-ms-flex-order: 3;/*混合版本*/
	-webkit-order: 3;/*新版本*/
	order: 3;/*新版本*/
}
nav{
	border:1px solid black;
	width:20%;
	/*文字水平垂直居中*/
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flex-box;
	display: -webkit-flex;
	display: flex;
	/*水平居中*/
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	/*垂直居中*/
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
header,footer,article,aside,nav{
	padding:1%;	
}
header{
	min-width: 100%;
	min-height: 100px;
	border:1px solid black;
	line-height: 100px;
	text-align: center;
}
footer{
	min-width: 100%;
	min-height: 60px;
	border:1px solid black;
	background: #eee;
	line-height: 100px;
	text-align: center;
}
最终样子：






季诗筱
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局
chenqiuqian的博客
04-21 5707
首先给父盒子设置一个orange（橙色）的背景颜色。给父盒子添加三个子盒子，设置宽高各为150像素，设置背景颜色为pink（粉色），再给一个像素的黑色边框； 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt...
css等高布局常用几种方式
infotw的博客
06-06 335
等高布局的方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负margin和Padding实现 真等高实现方式 •table •absoult •flex •grid •js 伪等高之-负margin和padding 主要利用负margin...
如何使用CSS实现一个自适应等高布局？
最新发布
官方推荐
08-29 7889
如何使用CSS实现一个自适应等高布局？
CSS等高布局
weixin_43565079的博客
09-10 515
一、利用盒子padding-buttom：999px和margin-buttom：-999px互相抵消，之后用overflow：hidden开启BFC裁剪多余的部分。考虑兼容性会好用一点。 <style> html{ width: 100%; height: 100%; display: flex; justify-content: center;
浅谈CSS等高布局
筱葭的博客
03-01 526
典型网页结构：两列结构，左列用来导航，右列用来显示内容，左右两列的高度都不固定。 需求：两列的高度保持一致，避免出现“断层”的效果。 padding补偿法： 实现CSS等高布局的方法有几种，其中浏览器兼容最好的方法是padding补偿法。 (1)把列的padding-bottom设为一个足够大的值； (2)把列的margin-bottom设为一个与padding-bottom的正值相抵消
详解CSS3伸缩布局盒模型Flex布局
09-22
主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3弹性盒子flex实现三栏布局的实现
01-22
如题：高度已知，左右栏宽度300px，中间自适应： 弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器...三栏布局</title> </head> <style type=text/css>
CSS3弹性伸缩布局之box布局
09-27
主要为大家详细介绍了CSS3弹性伸缩布局之box布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
CSS等高布局（margin与padding抵消）
weixin_45678090的博客
07-11 948
等高布局概念 等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。下面将介绍的是：伪等高（margin与padding）真等高（） margin与padding实现伪等高 1、使用正值的padding-bottom把元素撑开； 2、用负值的margin-bottom把两个元素的下边界收回原来的位置。 3、父元素用overflow：hidden；把超出部分隐藏。 <style> #fu{
CSS3中flexbox如何实现水平垂直居中和三列等高布局
weixin_30376509的博客
09-11 271
最近这些天都在弥补css以及css3的基础知识，在打开网页的时候，发现了火狐默认首页上有这样一个东西。 第一个css属性就没有看懂。于是乎，开始各种找资料，各种看书。这些天把对于css3伸缩布局盒（flexbox）模型的理解写成博文，目的是对flexbox做一个简单的介绍。 以下的内容会分为如下小节： 1.关于css3中flexbox需要掌握的概念 2.f...
三种方法实现两栏等高自适应布局（《CSS世界读书笔记》）
Aimee_ice的博客
05-21 2439
前言 本文为张鑫旭《CSS世界》读书笔记，代码实现思路亦来源此书。 效果需求： 实现两栏布局，要求无论哪一栏的内容多，两栏高度均以最高一栏为准，两栏的背景色需和容器高度相等，即竖直方向铺满容器。 【TIPS】这里为什么不用height: 100%呢？原因在于必须给父元素设定具体高度值，此属性值才会起作用，但大部分情况下，我们是不太会给父元素的高度定死的。 代码实现： 方法一：使用 di...
CSS控制整个盒子占满屏幕
qq_43350941的博客
08-03 5508
CSS盒子高度自适应
移动端开发之容器的属性
aiuzi的博客
05-04 187
1. display 决定是否使用flex布局，默认沿主轴方向排列 .box{ display:flex;/*块元素的宽度为百分百*/ display:inline-flex/*由里面的内容撑开*/ } 2. flex-direction 决定了主轴的方向 .box{ flex-direction:row;/*主轴为水平方向，起点在左端*/ flex-direction:row-reverse;/*主轴为水平方向，起点在右端*/ flex-direction:column;/*主轴为垂直方向
三列等高布局实现
qq_38164763的博客
07-14 846
前言   三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。 margin+padding实现   首先我们先来看一下最后的效果:   左边两列都会自动和第三列对齐, 下面我们一步步来实现。   首先很...
css 等高布局
weixin_43294560的博客
06-14 230
方式一：表格布局 方式二：弹性盒子
flex弹性盒子(伸缩盒模型)的使用
李青不吃螺蛳粉的博客
03-26 680
伸缩盒布局 1 伸缩容器和伸缩项目 伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex，该元素就变为伸缩容器。 伸缩项目： 伸缩容器的子元素就会变为伸缩项目。 伸缩项目会水平排列，可以完美的设置宽高以及内外边距，不存在外边距塌陷合并，并且具有伸缩性。 只有伸缩容器的子元素才是伸缩项目，子元素的子元素以及其他后代不是。 伸缩项目也可以作为它的子元素的伸缩容器。 2 设置主轴方向和换行方式 主轴： 伸缩项目会沿着主轴排列，主轴的默认是水平的且
css3弹性盒子布局
08-25
它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性： 1. 弹性容器（Flex Container）：使用`display: flex;`或`display: inline-flex;`来定义容器为弹性容器。弹性容器的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值