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

html-css027

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 复杂布局形式

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">

<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>

</ul>

css代码：

<style type="text/css">

.imgWrap li {

float: left

border: solid 1px #666

margin: 10px 10px 0 0

list-style: none

border-collapse: collapse

}

.imgWrap a {

background: #ffa url(images/gridBg.gif) repeat center

width: 219px

height: 219px

display: table-cell/*图片容器以表格的单元格形式显示*/

text-align: center/* 实现水平居中 */

vertical-align: middle/*实现垂直居中*/

}

.imgWrap a:hover {

background-color: #dfd

}

.imgWrap img {

border: solid 1px #66f

vertical-align: middle/*图片垂直居中*/

}

</style>

实现效果如下：