弹性布局的三种垂直居中 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    /*三个div被挤到中间了*/
    align-content: center;
     /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/     
    /* align-items: center;  */
    flex-wrap: wrap;
    width: 200px;
    height: 400px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
}
/* .self{
  align-self: center;
} */
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item self">flex item 1</div>
  <div class="flex-item ">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>
<!-- 
  三种垂直对齐
1、align-items:center 写在父级，最常用的垂直居中，在不换行的情况下居中在父级容器的正中间，换行的情况下是中间一条线，然后在分两部分居中（可运行后看效果）。
1.1align-items:center 会使子级元素不能继承父级元素的高度。
2、align-content:center 写在父级，用于修改 flex-wrap 属性的行为(如果不换行，则无效)，所有的子级都会在父级的正中间（可运行后看效果）
3、align-self:center; 
3.1写在子级上，自身居中。且父级不能用flex-wrap:wrap;换行属性。
3.2除了默认值stretchc;外其它的属性值，高度都不能在继承父级的高度了。
3.3当元素自身设置有align-self属性，和父级设置align-item属性时，先听自身的。
 -->
posted @ 2018-10-02 23:22  十年后2028  阅读(8479)  评论(0)    收藏  举报