CSS3 弹性盒子总结

有些文档写的很难懂,今天硬生生的试验效果试验出来了,用注释总结了下各个样式的效果,因为可以设置方向,所以这里用主轴和侧轴的术语描述,没有使用横向和纵向或者行和列的术语,仅使用换行中行的概念,注意如果主轴是列方向,则换行是横向排列的;还需要注意stretch拉伸元素受行的高度限制,如果盒子中有一行则,高度最大是盒子的高度,如果盒子两行,则stretch 元素高度是所在行其他元素最高的高度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 550px;
    background-color: lightgrey;
	flex-direction: column; /*主轴方向,row或者是column,或是反向的 row 和 column*/
	flex-wrap:wrap;  /*子元素超出弹性盒子边界是否换行*/
	justify-content:space-between; /*主轴方向元素对齐方式*/
	align-items:center; /*主轴方向上的元素在侧轴方向的对齐方式,可以被弹性盒子中的元素的align-self覆盖,默认是拉伸*/
	align-content: space-around ;   /*换行后行与行之间的对齐方式,默认是拉伸*/

}

.flex-item {
    background-color: cornflowerblue;
    width: 80px;
    min-height: 100px;border:solid 1px #000;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
	
	height:150px;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex-start 1 </div>
  <div class="flex-item item2">flex-end 2 </div>
  <div class="flex-item item3">center 3 </div>
  <div class="flex-item item4">baseline 4 </div>
  <div class="flex-item item5">stretch 5</div>
	<div class="flex-item " style="width:30px;">6</div>
	<div class="flex-item item1">flex-start 1</div>
  <div class="flex-item item2">flex-end 2</div>
  <div class="flex-item item3">center 3</div>
  <div class="flex-item item4">baseline 4</div>
  <div class="flex-item item5">stretch 5</div>
</div>

</body>
</html>

 

Leave a Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据