Flex布局
flex container容器属性
- flex-direction:row(默认) row-reverse(沿行方向从左往右)
- column-reverse:(沿列方向从下往上)
-
Justify-content:决定了flex-items在main axios上的对齐方式。
默认值justify-content:flex-start。
当justify-content: flex-end;时,变成右对齐
当调整justify-content: space-between;时,效果如下
当调整justify-content: space-evenly;效果如下
-
align-items决定了item在交叉轴的对齐方式。
**aliign-items:center时,效果如下**
在这里插入代码片
``````html
<!-- flex布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="Box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<strong>Strong元素</strong>
</body>
<style>
.Box{
/* 开启flex布局 inline-flex
flex : 块级元素 ; inline-flex:行内元素。
*/
display: flex;
width: 500px;
height: 300px;
background-color: #ff0000 ;
/*flex-direction: row-reverse;*/
margin: 0 auto;
justify-content: space-evenly;
align-items:center;
}
.item{
width: 100px;
/*height: 100px;*/
color: white;
text-align: center;
/*line-height: 100px;*/
}
.item1{
background-color: yellow;
height: 100px;
line-height: 100px;
}
.item2{
background-color: green ;
height: 150px;
line-height: 150px;
}
.item3{
background-color: blue;
height: 200px;
line-height: 200px;
}
</style>
</html>
![](https://img-blog.csdnimg.cn/20201224204534800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDg5MjI1,size_16,color_FFFFFF,t_70)