css之dispaly:flex;多行多列

html-css020

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值相同

四、一起来试一试

首先你要有一个合理的布局：

<div class="box">

<ul class="list">

<li>1111111111111</li>

<li>2222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

</ul>

</div>

用一个盒子包住一个无序列表，把盒子模型的宽度固定，当li没有宽度的时候，它就是单列的，当li有宽度而且浮动的时候，可以随意变成多列多行。

现在假设盒子模型宽是450~左右内边距是10：

样式一（一列多行）：

*{padding:0margin:0}//初始化内外补白

li{list-style:none}//初始化列表

.box{width:450pxpadding:10px}

.box .list li{line-height:24px}

样式二（二列多行）：

*{padding:0margin:0}//初始化内外补白

li{list-style:none}//初始化列表

.box{width:450pxpadding:10px 0 10px 10px}//这时候列表的宽度只剩下450-10=440,可以把宽度定为210加10右边外补白

.box .list{zoom:1}

.box .list:after{content:""height:0clear:bothdisplay:block}//清除浮动

.box .list li{widht:210pxline-height:24pxfloat:leftmargin-left:10px_display:inline}//两个220刚好440的宽