css之dispaly:flex;多行多列

html-css013

css之dispaly:flex;多行多列,第1张

最近老是遇到布局问题,尤其是在垂直居中布局上。之前不了解display:flex最近看了看书,简单的整理了下,于是就产生了这篇文章

flex弹性布局可以简便,完整,响应式的实现各种页面的布局,而且现在也得到了所有浏览器的支持,实在是布局很便利的工具呢。

一、flex布局的基本概念

1.任何一个元素使用display:flex属性后都可以看做一个flex容器;2.它的子元素变成flex容器中的项目,称为flex item;3.flex容器里面默认存在两根主轴:水平的主轴和垂直的轴

,用这两根轴将容器分成多行

二、flex容器的基本属性

1.flex-direction属性:表示项目的排列方式或者说主轴的方向,有以下四个值

row:默认值,主轴为水平方向,从左向右排列

row-reverse:主轴为水平方向,从右向左排列

column:主轴为垂直方向,从上往下排列

column-reverse:主轴为垂直方向,从下往上排列

2.flex-wrap属性:默认情况,所有的子元素都在一行,此属性主要定义如果不在一行时子元素如何排列,有如下三个值:

nowrap:不换行

wrap:换行

wrap-reverse:换行,第一行在下方,第二行在第一行上面依次类推

3.flex-flow:集1.和2.属性于一身,意思就是这个属性可以直接指定上面两个属性的值,默认值为:row nowrap

4.justify-content:定义子元素在主轴上的对齐方式,有以下五个值:

flex-start:左对齐

flex-end:右对齐

center:居中

space-between:两端对齐

space-around:每个项目两侧间隔相等

5.align-items属性:定义子元素在水平轴和垂直轴的交叉轴上如何对齐,有以下五个值:

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴的中点对齐

baseline:项目的第一行文字基线对齐

strecth:默认

6.algin -content属性:定义多根轴线的对齐方式,如果项目只有一根轴线,则该属性不起作用,该属性有以下六个值:

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴的中点对齐

space-between:与交叉轴的两端对齐,轴线间的间隔平均分布

space-around:每根轴线的两侧的间隔都相等

strecth:默认,轴线占满整个交叉轴

三、子元素(项目)的属性

1.order属性:定义子元素的排列顺序,数值越小,排列越靠前,默认为0

2.flex-grow属性:定义项目的放大比例,默认值是0,就是如果存在剩余空间,也不放大。

若所有子元素的flex-grow值为1,则子元素等分剩下的空间

若一个元素的属性值为N,剩下值为1,则属性值为N的元素等分的空间是1的N倍

3.flex-shrink属性:定义了项目的缩小比例,默认为1,就是如果空间不足,该项目将缩小

若所有子元素此属性为1,空间不足时,将会被等比缩小,

若有元素属性值为0,即使空间不足,也不会被缩小

4.flex-basis属性:定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto原本的大小,也可以设置px结尾固定大小

5.flex属性:是2.3和4属性的简写,默认值为:0 1 auto,可以只写第一个值,后面两个是可选参数;该属性的两个快捷值:auto(1 1 auto)和none(0 0 auto)

6.align-self属性:此属性允许单个子元素与其他子元素不一样的对齐方

auto:默认值,表示继承父元素的属性,

其他:align-items值相同

四、一起来试一试

可以的,这个很简间。前提是你要下载一个火狐浏览器。下载安装好了后,运行出来再在菜单栏里的工具——附加组件。在里面的搜索里搜firebug。搜出来很多,你选一个图标是萤火虫的安起,再重启后,把你想看的那个网址找到,按F12里面可以查看里面用的样式和临时修改样式。你想要看一个地方的样式时,可以点你按F12出来的那个窗口里的头部,那萤火虫旁边那一个图标,点了后,你就可以去选你想看的那个地方,选中后就点击一下。就可以了。不过修改后,你刷新一下就会还原到原来的样子。所以可以在里面随便修改。以便与调整网页的bug

我是做网页前台的,呵呵希望可以帮到你,如果有什么不解的,可以百度搜luoxiao492。里面有我的联系方式。

首先指出楼主的几点误解,使用css当然可以使用DW,因为在DW里面写CSS代码的时候将有相当使用有效的代码提示与代码突出显示功能这将大大提高代码编写的速度与正确率,另一点,事实上这是对于所有习惯于TABLE布局方式的设计师的共同问题,即如何从当初的可视化设计中转换到现在的纯手工写代码的方式来,这仅仅是一个习惯问题,如果你觉得写这些代码很麻烦的话那你可以想想那些一贯以来写后台代码的从来没有享受过可见即所得的人,事实上你会发现这没什么甚至你写的这些代码完全无法和人家相比,而且CSS写多了写顺手了你将发现那是TABLE布局方式所无法比拟的优点,