CSS3之flexbox如何实现水平垂直居中和三列等高布局
发布网友
发布时间:2023-08-02 08:26
我来回答
共1个回答
热心网友
时间:2023-08-10 20:43
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西。
第一个css属性就没有看懂。于是乎,开始各种找资料,各种看书。这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍。
以下的内容会分为如下小节:
1.关于css3中flexbox需要掌握的概念
2.flexbox实现水平垂直居中对齐
3.三列等高自适应,页脚区域黏附底部的布局
1.关于css3中flexbox需要掌握的知识
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分重要。
a:伸缩容器:是指通过display属性显示地给一个元素设置为flex或者inline-box(标准版本),这个容器就是一个伸缩容器。
b:伸缩项目:一个伸缩项目是伸缩容器的子元素。一个伸缩容器的内容具有零个以上的伸缩项目--伸缩容器的每个子元素都会成为一个伸缩项目(包括文字,称为匿名伸缩项目)。
c:伸缩流方向:是指伸缩容器中的主轴方向,可以理解成x轴的方向。伸缩流方向主要通过flex-direction属性(标准标准版本)来设置,默认值为row。
d:伸缩行换行:伸缩项目在伸缩容器中有时候会溢出伸缩容器。在伸缩容器属性中,主要通过flex-wrap属性来设置伸缩容器是否换行,默认值为nowrap。
e:伸缩性:定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。
2.flexbox实现水平垂直居中对齐
html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
水平垂直居中对齐
首先,设置html和body的宽度和高度都为100%,目的是让其拥宽度和高度,否侧主轴对齐(box-pack)和侧轴对齐(box-align)无法让伸缩项目之前分布伸缩容器的额外空间。
然后,让body成为伸缩容器,设置display属性为box,设置box-pack和box-align来控制主轴对齐和侧轴对齐,让其属性值都为center。
最后,.content元素成为伸缩容器,这样其内部文字块会成为匿名伸缩项目。此时的.content元素即为伸缩容器,又为伸缩项目。当作为伸缩容器的时候,h1元素为其伸缩项目;当作为伸缩项目的时候,body为其伸缩容器。同样为.content设置box-align和box-pack,来控制侧轴对齐和主轴对齐方式 。
效果图如下,.cotent元素和h1都实现了水平垂直居中对齐。
3.三列等高自适应,页脚区域黏附底部的布局
对于三列布局的方法有非常多种,可以通过对float+百分比宽度来实现,也可以用inline-block配合百分比实现,但是很难实现页脚黏附浏览器可视窗口底部的布局。这里只对css3三列等高布局做介绍。
做任何的布局效果,都离不开HTML结构。
头部
主内容
左边栏
右边栏
页脚
假设头部和页脚的宽度为100%,左右两栏宽度为200px,而主内容自适应宽度。
body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}
这里为body设置box-sizing是为了让盒模型的宽度=内容宽度+border+padding,避免在设置padding值时需要计算width的宽度。
接下来,使用伸缩布局盒模型box(旧版本,仍然可以使用),让#page元素成为伸缩容器,设置box-flex让其子元素拥有伸缩性,自适应伸缩容器的剩余空间。
#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
上面代码中,使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width,这里的#main元素的box-flex属性会失效,原因在于父容器没有宽度,自然无法填充伸缩容器的额外空间,(这里的额外空间指的是#page元素所占的面积,而不单单指宽度)。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器(Chrome,Safari)和Gecko内核(Firefox)不支持box-flex属性和box属性,所以必须添加厂商前缀。
上面实例中,需要修改一下主内容和左边栏,右边栏的排列方式,使用box-ordinal-group属性。
#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}
上面代码中,使用了box-ordinal-group属性,这个属性是用于修改伸缩项目在伸缩容器中的显示顺序,默认值为1,也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。
至此,这个页面就已经做好了。但是出现了一个问题,就是页脚区域不会黏附在浏览器窗口可视区域底部,这让用户体验非常糟糕。
使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器,并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性(也就是#page元素)。也就是说,页脚区域前的div会变成一个伸缩项目,会根据伸缩容器的高度自适应填充伸缩容器的额外空间,也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。
如果希望整个页面的布局要和浏览器窗口可视区域一样高,
首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置,body本身就没有高度,当然伸缩项目的伸缩性也就无法体现。
html, body {
height: 100%;
}
其次,让body元素自身成为一个伸缩容器,并且设置伸缩流方向(box-orient)为vertical(旧版本中的属性)。
body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}
最后,设置页脚区域前的div(#page元素)中的box-flex属性,让其根据伸缩容器(这里是指body)的高度自适应伸缩容器body的额外空间,也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。
#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}
上面代码中,#page元素本身是一个伸缩容器,现在变成伸缩项目。在伸缩布局盒模型中,伸缩项目在侧轴的对齐方式box-align(旧版本)默认值为stretch,(css中可不写box-align属性)致使#page元素的三个伸缩项目都会自动拉伸,不管内容高度有多少都具有伸缩容器#page的高度,从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。
完。
感谢大家的阅读。
CSS3之flexbox如何实现水平垂直居中和三列等高布局
以下的内容会分为如下小节:1.关于css3中flexbox需要掌握的概念2.flexbox实现水平垂直居中对齐3.三列等高自适应,页脚区域黏附底部的布局1.关于css3中flexbox需要掌握的知识因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,...
flex布局怎么垂直居中flex布局垂直居中怎么写
3、在css标签内,再设置最外层p为flex布局,并通过align-items属性设置p内两个p垂直方向居中对齐,通过justify-content属性设置p内两个p水平方向两端对齐。用代码写html语言,怎么让字体居中?下面介绍关于html元素水平居中的几种方式1、对于行内元素采用text-align:center;的方式3、用table实现4、块级的...
如何通过flex进行网页布局
如果项目只有一根轴线,该属性不起作用实例flex实现水平垂直居中* { margin: 0; padding: 0; }html { width: 100%; height: 100%; } body { display: flex; width: 100%; height: 100%; background: #eee; justify-content: center; align-items: center; } .box { width: 200px; heig...
CSS中的Flexbox布局是怎么使用的?
浏览器里主轴的默认方向为横向,侧轴为竖向,下面我们讲Flex布局的属性时会采用浏览器的状态,学会后对应到RN里,换个主轴方向就可以了。 用在容器上的属性,最常用的有 5个, 而且这些属性还都不是从来设置容器自己的布局,而是用来设置容器里item的布局。 flex-direction 属性用来设置主轴的方向,即容器里item自动排列的...
css垂直居中怎么设置
1、通过verticle-align:middle实现CSS垂直居中。通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。2、通过display:flex实现CSS垂直居中。随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平...
CSS3的Flexbox
Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行; 可以快速让他们布局在一列; 可以方便让他们对齐容器的左、右、中间等; 无需修改结构就可以改变他们的显示顺序; 如果元素容器设置百分比和视窗大小改变...
如何让文字上下居中?
使用CSS的行高(line-height)属性:将行高设置为与容器高度相等的值。例如,如果容器高度为100像素,可以将行高设置为100像素,文字将在容器中垂直居中。css 复制.container { height: 100px;line-height: 100px;text-align: center; /* 可选,用于水平居中 */ } 使用CSS的弹性盒子(flexbox)布局...
前端面试题系列之-CSS及页面布局篇
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发...
怎么让一个div中的两个div垂直居中
CSS3时代当然要用CSS3的完美解决办法。不能忍受以前的height和line-height同高等等的解决方法,想想都觉得不优雅。用CSS3中的flexbox 布局模式:.vertical-container{ display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-...
如何设计响应式布局如何设计响应式布局图
通过Row组件的type=flex启动flex布局,再通过Row组件的justify属性调整排版方式,属性值分别有 start居前(默认)center居中 end居后 space-between分布自适应(两边_中间,两边没有空隙)around(中间_两边,两边会有空隙)1 2 3 4 el-rowtype=flexclass=row-bgjustify=center> el-col:span=6>pclass...