ES6-Flex布局（元素布局）
2022-07-17 本文已影响0人
测试探索
一、元素项（Flex Item）的属性
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type = "text/css">
.container{
width: 600px;
height: 600px;
margin: 0 auto;
background-color:beige ;
display: flex;
/*元素项排列方式*/
flex-direction: row;
/*内容是否换行*/
/*flex-wrap: wrap;*/
/*!*水平居中对齐*!*/
/*justify-content: center;*/
/*!*垂直轴对齐方式*!*/
/*align-items: center;*/
}
.container div{
width: 250px;
height: 100px;
}
.first{
order: 2;
background-color: #f00;
}
.second{
order: 1;
background-color: #ff0;
}
.third{
order: 3;
background-color: #00f;
}
</style>
</head>
<body>
<div class = "container">
<div class = "first">1</div>
<div class = "second">2</div>
<div class = "third">3</div>
</div>
</body>
</html>
image.png
