弹性盒模型也叫flex布局
弹性盒模型是CSS属性
flex使用方式
选择器{
display:flex;
}
直接上Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
display:flex;
border: 1px solid black;
}
li{
width: 20%;
height: 200px;
list-style: none;
}
#one{
background-color: red;
}
#two{
background-color: aqua;
}
#three{
background-color: green;
}
</style>
</head>
<body>
<div>
<li id="one"></li>
<li id="two"></li>
<li id="three"></li>
</div>
</body>
</html>
效果图:
可以看见,div标签是li标签的父标签,而且div是弹性盒模型,弹性盒模型内的元素自然排列是横排,块级元素在弹性盒模型内也是横排显示
使用flex布局的元素可以使用一些关于弹性盒模型的属性。
flex-direction属性
设置主轴的反向。
row——默认,主轴从左到右
div{
display:flex;
flex-direction: row;
}
效果图:
row-reverse——主轴从右向左布局
div{
display:flex;
flex-direction:row-reverse;
}
效果图:
column——主轴纵向排列
div{
display:flex;
flex-direction:column;
}
效果图:
column-reverse——反向的主轴纵向布局
div{
display:flex;
flex-direction:column-reverse;
}
效果图:
justify-content属性
内容元素根据主轴布局
flex-start——内容位于主轴开始位置
div{
display:flex;
flex-direction:row;
justify-content:flex-start;
}
效果图:
flex-end——内容位于主轴尾部
div{
display:flex;
flex-direction:row;
justify-content:flex-end;
}
效果图:
center——内容位于主轴中间
div{
display:flex;
flex-direction:row;
justify-content:center;
}
效果图:
space-between——平均分布,第一个与最后一个内容元素紧贴父元素
div{
display:flex;
flex-direction:row;
justify-content:space-between;
}
效果图:
space-around——平均分布,但第一个与最后一个内容元素并非紧贴父元素
div{
display:flex;
flex-direction:row;
justify-content:space-around;
}
效果图:
align-items属性
内容元素根据副轴布局
flex-start——内容元素位于副轴的开头
div{
display:flex;
flex-direction:row;
align-items:flex-start;
}
效果图:
flex-end——内容元素位于副轴的尾部
div{
display:flex;
flex-direction:row;
align-items:flex-end;
}
效果图:
center——内容元素位于副轴的中间
div{
display:flex;
flex-direction:row;
align-items:center;
}
效果图:
flex-wrap属性
设置内容元素是否多行
nowrap——内容元素即使宽过父元素也是单行
div{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}
效果图:
warp——内容元素宽于父元素时,多余的内容元素会在第二行
div{
display:flex;
flex-direction: row;
flex-wrap:wrap;
}
效果图:
wrap-reverse——内容元素宽于父元素时,多余的内容元素会在第二行,但是翻转的
div{
display:flex;
flex-direction: row;
flex-wrap:wrap-reverse;
}
效果图:
弹性盒模型常用的属性就写到这里~
欢迎大家补充~