查看: 1474|回复: 0

[DIV/CSS] CSS3中的flexbox

发表于 2016-5-23 12:00:03

css3中的flexbox给布局带来了许多方便。下面我们就简单的讲一讲它的用法以及适用的地方。

flexbox布局主要分为两个部分:

flex-container

flex-item

flex-container以外的地方和flex-item中的内容不受影响,按正常的方式进行布局。

现在让我们分别看一看父容器和子元素的一些属性。

父容器的属性

display: flex | inline-flex
父元素设置flex或者inline-flex属性之后,其所有的直接子元素自动升级为容器成员,子元素的float,position属性失效。

flex-direction: row | row-reverse | column | column-reverse
用来设置flex-item的排列方式,row为默认选项,由容器x轴开始从左往右进行排列,其他三个选型以此类推。

flex-wrap: nowrap | wrap | wrap-reverse
三个值分别代表换行,不换行,不换行且反方向排列。

justify-content: flex-start | flex-end | center | space-between | space-around
该值有5个属性,假设布局从左往右,这五个值分别代表:左对齐,右对齐,居中,两端对齐,项目之间的间隔都相等,每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch
指定在y轴上如何对齐

align-content
该属性在有多根轴线的情况下适用?

子元素(flex-item)的属性

order:
该属性可以调整子元素的顺序。数值越小,排列越靠前,默认情况为0。我们可以通过设置顺序较为后面的元素的order属性为-1来将其前置。

flex-grow:
设置通过什么样的方式分割容器剩余部分的空间。
flex-grow默认值为0,不分取任何剩余空间。
若父容器中有三个flex-item,他们的flex-flow值为1,则三者按照1:1:1的比例等分剩余空间;若它们的flex-flow的值分别为1,2,3,则三者分别分取剩余空间的1/6,2/6,3/6.

flex-shrink:
默认值为1,表示该元素会随着父容器空间的不足而缩小自己。若设置该属性为0,则此元素在父元素空间不足时仍保持自己的宽度。

flex-baisis: | auto

flex: flex-flow[,flex-basis]
综合flex-flow, flex-shrink和flex-basis

align-self: auto | flex-start | flex-end | center | baseline | stretch
允许单个元素与其他元素有不一样的对齐方式
其中auto为默认值,默认继承align-items的属性,若设置为其他值,可覆盖align-items的属性。

浏览器的兼容问题:

目前各浏览器的最新版本都实现了flexbox布局,但是兼容浏览器的不同版本仍然是一项巨大的工程啊TT



回复

使用道具 举报