CSS3 Flexbox布局

CSS: Flexbox布局

早期布局主要依赖表格,后来有绝对定位、浮动定位的出现,在CSS3中引入了Flex-box布局,伸缩布局盒模型。主要思想是让容器有能力让其子项目能够改变其高度,宽度,甚至顺序,以最佳的方式填充空间。以简单的方式实现复杂的布局。用Flexbox布局有两部分组成,一个是Flex容器Flex Container,一个是Flex里面的项目Flex Item.在容器上有横着的主轴main axis,竖着的叫做cross axis.在主轴上最左边的点叫做主轴的起点main start.最右边的点叫做main end,主轴的终点.在cross axis上也有两个点,上面那个是cross start,下面那个是cross end.在每一个项目中水平的尺寸叫做main size,垂直的高度叫做cross size.

设置Flex容器。

首先我们写一个元素

默认情况下他们是这样显示的:按照块级元素从上到下。

接下来我们设置这个容器为Flex容器:

我们会发现Flex容器里的元素在一排显示。

项目的排列方向

在Flex容器上面我们可以用这个属性来控制项目的排列方式,这个属性主要设置的就是,也就是主轴的方向。有两个主要的方向,一个是,水平方向。另一个是,就是垂直的方向。

我们改变我们的样式为:

此时我们的项目会水平排列,并且row是默认值。除此之外row-reverse可以设置项目反向排列,也就是从右向左。同理如果我们设置为column的话项目就会从上往下排列,同样的column-reverse可以让我们的项目从下往上排列。

换行显示

Flex容器中的项目默认的话会在同一行显示,通过我们可以设置项目是否要多行显示。

增加我们的项目:

增加样式:

你就会发现每行的项目数目会根据容器的宽度多行显示。同样的wrap-reverse会颠倒我们的项目。

上面两个属性我们还可以用一个flex-flow共同设置:

justify-content

这个属性可以帮助我们设置项目的位置以及各自之间的间隔。默认值:flex-start.flex-end为右对齐,center为左对齐。space-between会在项目间设置间隔。但是项目与容器间是没有间隔的,如果需要的话可以用space-around.

align-items

这个属性可以设置项目在垂直方向上的对齐方式,我们的项目高度默认是和容器高度相等,容器高度大的话我们的项目就会去拉伸,这也就对应了他的默认属性stretch.除此之外,align-start会让我们的项目靠着容器顶部去显示,flex-end则是在底部显示。居中的话是center,如果项目垂直方向上对齐方式不同,我们可以用baseline属性,然后去指定各自顶部的内边距。

多行项目的对齐方式align-content.

默认值stretch,拉伸显示的方式。还可以设置flex-start,flex-end,center.他们都是不拉伸的显示方式。space-between可以在行与行之间设置间隙。space-around会在行的周围也就是上下添加间隔,间隔大小就看容器剩余了多少空间。

项目的顺序

Flex容器中项目的默认属性就是我们书写HTML代码时的顺序,但是我们可以用order去改变它。默认情况下所有项目的order属性的值都为0,我们可以把第一个项目放到最后:

这样的话因为1在0的后面,所以第一个项目就会到最后面。类比如果想让哪个元素排到最前面,设置他的order为-1即可。

项目水平宽度

Flex项目默认的水平宽度是它里面内容的宽度。在水平方向上如果我们想设置项目的宽度从而适应视口的宽度,flex-grow属性的默认值为0,将其改变为1就可以实现:

此时我们的项目会在水平方向上铺满屏幕,flex-grow还可以单独的设置某个元素,通过改变数字的大小控制他的宽度。

可以设置项目初始的宽度,默认是auto.

flex-shrink默认值为1,我们可以将某个项目设置为0,他的宽度就不会随着视口的减小而减小。设置的值大的话,在我们缩小页面的时候就会发现它缩小的最多。

上面三个属性可以用一个flex全部设置flex: flex-grow flex-shrink flex-basis;.

align-self

在项目中使用这个属性就可以单独设置他的垂直对齐方式,包括:flex-start,flex-end,center,stretch等等。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180428G1V8N600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券