你的位置:首页 > 软件开发 > 网页设计 > CSS3之flexbox如何实现水平垂直居中和三列等高布局

CSS3之flexbox如何实现水平垂直居中和三列等高布局

发布时间:2016-09-11 12:00:08
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西。第一个css属性就没有看懂。于是乎,开始各种找资料,各种看书。这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍。 ...

 

 

 

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西。

CSS3之flexbox如何实现水平垂直居中和三列等高布局

第一个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;}

原标题:CSS3之flexbox如何实现水平垂直居中和三列等高布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。