弹性盒子布局
简单介绍一下弹性盒子布局:父级盒子可以有多个子盒子,弹性盒子只定义了子元素如何布局,不影响盒子内外的渲染;在父级定义该父级为弹性盒子,父级内的子级盒子全在一行显示,影响只是布局,见代码:
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.big{
-
display: flex;
-
}
-
.big>div{
-
width: 200px;
-
height: 100px;
-
background: red;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="big">
-
<div>列1</div>
-
<div>列2</div>
-
<div>列3</div>
-
<div>列4</div>
-
<div>列5</div>
-
<div>列6</div>
-
</div>
简单的定义为弹性盒子;上面代码默认是从左到右进行排列;
也可以修改从右到左排列;只要设置direction:rtl页面布局也就跟着变;
-
.big{
-
display: flex;
-
direction: rtl;
-
}
请欣赏页面布局的效果:
flex-direction属性:顺序指定了弹性子元素在父容器中的位置;
flex-direction: row | row-reverse | column | column-reverse
flex-direction
的值有:
- row:横向从左到右排列(左对齐),默认的排列方式。
- row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。{反序排列;}
- column:纵向排列。
- column-reverse:反转纵向排列,从后往前排,最后一项排在最上面{反向纵向排列}
-
.big{
-
display: flex;
-
flex-direction: row-reverse;
-
}//产生的效果与diretion相同;
反向纵向排列:
-
.big{
-
display: flex;
-
flex-di