CSS3布局怎样设置设置对齐方式、排列方式、自动换行啊?

html-css05

CSS3布局怎样设置设置对齐方式、排列方式、自动换行啊?,第1张

flex-align:默认是设置垂直方向的对齐方式,值: start、end、center、stretch、baseline。

flex-pack:设置子元素之间如何分配多余空间,值:start、end、center、justify。

flex-direction:设置子元素的排列方式, row、row-reverse、column、column-reverse。

flex-wrap:设置子元素的是否自动换行和排列方向,值:nowrap、wrap和wrap-reverse。

-ms-flex:设置子元素弹性,参数,分别是正弹性、负弹性和默认大小。

其实布局还有好多新玩法,你可以多看看相关的教程,比如说现在有个视频的系列名称叫做 《Buid New World》,里面有一集专门讲 CSS3 复杂布局形式

结构呢?我觉得挺像。好,Div的结构搞定了,下面就用CSS去控制它:equal{display:tableborder-collapse:separate}

.row {display:table-row}

.row div {display:table-cell}

.row .one {width:200px}

.row .two {width:200px}

.row .three {}

上面说一下上边各个CSS属性的意义:

1.dispaly:table让.equal层作为块级元素的表格来显示,也就是将显示成表格的样子

2.border-collapse:separate边框独立,就像表格没有合并单元格以前

3.display:table-row将.row作为表格行tr显示

4.display:table-cell将.row的下级div作为表格单元格td显示

使用border-spacing:10px主要是来区分几个盒子,因为IE下不能正常显示,但是在:Mozilla、Opera、Firefox、Chrome下都是可以的。