<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-direction</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
flex-direction属性 设置子元素的主轴方向
row: 默认值;元素将水平显示,和 一行一样
column: 纵向;元素将垂直显示, 和 一列一样
row-reverse: 与row相同,但是是以相反的顺序;
column-reverse: 与column相同,但是是以相反的顺序;
*/
.flex-container {
height: 1000px;
display: flex;
background-color: green;
flex-direction: column-reverse;
}
.flex-item {
width: 300px;
height: 200px;
margin: 10px;
background-color: orange;
}
</style>
</head>
<body>
<div class="flex-container">
<!-- <div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div> -->
<span class="flex-item">1</span>
<span class="flex-item">2</span>
<span class="flex-item">3</span>
</div>
</body>
</html>上述运行结果：
2300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
