ES6-Flex布局（容器属性）
2022-07-13 本文已影响0人
测试探索
一：Flex容器（flex container）
image.png
二：Flex容器（Flex Container）的属性
1-1：flex-direction --容器内元素的排列方向
row(默认值)：主轴为水平方向，从左到有
row-reverse：主轴为水平方向，从右到左
column：主轴为垂直方向，从上到下
column-reverse:主轴为垂直方向，从下到上
<!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: column-reverse; //参数可替换
}
.container div{
width: 100px;
height: 100px;
}
.first{
background-color: #f00;
}
.second{
background-color: #ff0;
}
.third{
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
1-2:flex-wrap--容器内元素的换行行为
nowrap(默认)：不换行
wrap：换行，首行在上方
wrap-reverse：换行，首行在底部
<!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;
}
.container div{
width: 250px;
height: 100px;
}
.first{
background-color: #f00;
}
.second{
background-color: #ff0;
}
.third{
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
1-3:justify-content--元素在水平轴上的对齐方式
flex-start(默认值):左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，item之间的间隔相等
space-around:每个item两侧的间隔相等
<!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;
}
.container div{
width: 250px;
height: 100px;
}
.first{
background-color: #f00;
}
.second{
background-color: #ff0;
}
.third{
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
1-4：align-items--元素在垂直轴上的对齐方式
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{
background-color: #f00;
}
.second{
background-color: #ff0;
}
.third{
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
