[ css 弹性盒子模型 align-content align-items属性 ] 弹性盒子模型flex布局中align-items 和align-content属性讲解及实例演示的区别

标签：

align-items

　　align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式,还有一位回答者的回答也很好，如下:

　　　　align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中

align-content

　　align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐,感觉这样翻译了之后还是略微有些抽象，不过有一个重点就是多行， 
下面我们来写一个小的例子。

<div class="child-1">
    <div class="child-2"> </div>
    <div class="child-2"> </div>
</div>

html结构如上。 
如果child-1的width设置为100px,child-2的width设置为30px,这样child-2会排列在一排上，具体的css如下

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}

div {
    border: 1px solid #0f0f0f;
}

.child-1 {
    margin: 30px auto;
    display: flex;
    width: 100px;
    height: 60px;
    justify-content: space-around;
    align-content: center;
}

.child-2 {
    width: 30px;
    height: 20px;
}
</style>

最终的结果如下图 

所以对于只有一行的flex元素，align-content是没有效果的，如果.child-1改用align-items:center;则会达到预期的效果，如下图 

但如果变成多行容器 
使用align-items时效果如下 
 
使用align-content效果如下 

[ css 弹性盒子模型 align-content align-items属性 ] 弹性盒子模型flex布局中align-items 和align-content属性讲解及实例演示的区别

标签：

原文地址：http://www.cnblogs.com/mysearchblog/p/5651671.html