今天学习了flex布局,想要了解flex布局,要知道以下几个概念:
容器:如果我们给一个盒子加上了一个属性display:flex,那么这个盒子就是一个容器。
项目:容器中的它里面的直接子元素就是项目。
主轴:在容器中,项目按一定的方向进行排列的,默认是从左到右进行排列,这个排列的方向,我们称为主轴。(可以理解成x轴)
交叉轴:与主轴垂直的轴(可以理解成y轴)
<style>
div{
//设置这一属性说明div是容器,div中的直接子元素是项目,p是项目,span不是直接子元素,所以不是项目,如果想让span成为项目,则在p标签上设置dispaly:flex;
display:flex;
}
</style>
<div>
<p class="son">
<span></spa>
</P>
</div>
1、容器的属性常见的有
1. flex-direction :设置主轴的方向;
取值有:row | row-reverse | column | column-reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
display: flex;
/* flex-direction用来设置主轴的方向 */
/* flex-direction: row */ /*默认值,主轴水平,从左到右*/
/* flex-direction: row-reverse; */ /*从右到左 */
/* flex-direction: column; */ /*主轴垂直,从上到下 */
flex-direction: column-reverse; /* 从下到上 */
}
.item{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- -->
<div class="wraper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
2. flex-wrap:功能:用来控制容器中的项目是否换行
取值:wrap | no-wrap | wrap-reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
display: flex;
width: 250px;
/*默认值不换行*/
/* flex-wrap: nowrap; */
/*当容器宽度不够时,换行*/
/* flex-wrap: wrap; */
/*当容器宽度不够时换行并倒置*/
flex-wrap: wrap-reverse;
}
.item{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
3. flex-flow:功能:简化代码,是flex-direction和flex-wrap的合写
取值:flex-flow:flex-direction,flex-wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
height: 250px;
display: flex;
flex-flow: column wrap; /*flex-flow是flex-direction和flex-wrap的简写*/
}
.item{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
4. justify-content 功能:用来处理富余空间。
取值:flex-start | flex-end | center | space-between | space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
/* justify-content:处理容器的富裕空间 */
display: flex;
width: 1000px;
height: 800px;
border: 1px solid gold;
/*默认值,项目左对齐*/
/* justify-content: flex-start; */
/*项目右对齐*/
/* justify-content: flex-end; */
/*项目居中*/
/* justify-content: center; */
/*两端对齐,项目之间的间隔相等*/
/* justify-content: space-between; */
/*每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/
justify-content: space-around;
}
.item{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
5. align-items功能:设置项目在交叉轴上的摆放位置
取值:flex-start | flex-end | center | baseline | stretch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
width: 1000px;
height: 800px;
display: flex;
border: 1px solid gold;
/* align-items: 设置项目在交叉轴上摆放的位置 */
/*默认值,交叉轴的起始位置*/
/* align-items: flex-start; */
/*交叉轴的终点位置*/
/* align-items: flex-end; */
/*交叉轴中间对齐*/
/* align-items: center; */
/* 项目的第一行文字的基线对齐 */
/* align-items: baseline; */
/* stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度 */
align-items: stretch;
}
.item{
width: 100px;
/* height: 100px; */
border: 1px solid red;
}
</style>
</head>
<body>
<div class="wraper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
6. align-content 功能:当容器中有多行项目(前提是允许换行),每一行项目就会产生一根主轴,多行项目就有多根主轴。这个属性决定这多根主轴之间的位置关系。
取值:flex-start | flex-end | center | space-between | stretch | space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wraper{
width: 500px;
height: 800px;
display: flex;
border: 1px solid gold;
flex-wrap: wrap;
/* align-content
功能: 当容器中有多行项目(前提是允许换行),
每一行项目就会产生一根主轴,多行项目就有多根主轴
这个属性决定这多根主轴与交叉轴之间的位置关系。 */
/*与交叉轴的中间对齐*/
/* align-content: center */
/*与交叉轴起点对齐*/
/* align-content: flex-start; */
/*与交叉轴的终点对齐*/
/* align-content: flex-end; */
/* 与交叉轴两端对齐,轴线之间的间隔平均分布。 */
/* align-content: space-between */
/* 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 */
/* align-content: space-around */
/* stretch(默认值):项目没有高时,轴线占满整个交叉轴。 */
align-content: stretch;
}
.item{
width: 100px;
/* height: 100px; */
border: 1px solid red;
}
</style>
</head>
<body>
<div class="wraper">
<div class="item" style="width: 200px">1</div>
<div class="item" style="width: 120px">2</div>
<div class="item" style="width: 130px">3</div>
<div class="item" style="width: 170px">4</div>
<div class="item" style="width: 150px">5</div>
<div class="item" style="width: 180px">6</div>
</div>
</body>
</html>
欢迎批评指正