目录
一、基本使用
父容器与子容器
使用flex布局就是要将父容器设置为flex布局,之后便可控制子元素的布局。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局测试</title>
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
}
.container>span{
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
效果:
二、主要的父容器属性
属性
描述
flex-direction
设置主轴的方向
justify-content
设置主轴上元素的排列方式
flex-wrap
设置子元素是否换行
align-content
设置侧轴上子元素的排列方式(多行)
align-items
设置侧轴上子元素的排列方式 (单行)
flex-flow
复合属性,相当于同时设置了flex-direction和flex-wrap属性
主轴默认沿x轴正方向,侧轴默认沿y轴负方向。
(1)flex-direction设置子元素排列
元素按主轴进行排列,默认为row
子元素,按列进行排列,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
flex-direction: column;
}
(2)justify-content设置子元素对齐方式
设置子元素在主轴上的排列方式,默认为flex-start
案例,设置右对齐,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: flex-end;
}
设置居中对齐,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: center;
}
平方剩余空间,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-around;
}
先两边贴边,再平方空间对齐,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
}
(3)flex-wrap设置换行
设置子元素是否换行,默认不换行,当子元素过多时即使设置了宽度子元素也会按比例收放排列。
设置五个已超过宽度的小的子元素,效果如下:
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
设置换行,效果如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
f
(4)align-items单行时设置子元素位置
侧重的子元素位置(单行)
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-items: center;
}
效果:
(5) align-content多行时设置子元素位置
设置侧轴上子元素的排列方式(多行),一般配合换行属性使用该属性
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
效果:
(6)flex-flow复合属性
相当于同时可以设置flex-direction和flex-wrap。
使用案例,如下:
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
/*flex-direction: column;*/
/*flex-wrap: wrap;*/
/*相当于上面两行的效果*/
flex-flow: column wrap;
}
效果:
三、子项常用属性
属性
描述
flex
子项目占的份数
align-self
控制子项自己在侧轴的排列方式
order
定义了子项的排列顺序
(1)flex设置子项的空间大小
用来设置子项分配多少份空间,按照剩余的空间来分配。
使用案例如下:
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
}
.container>span:nth-child(1){
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
}
.container>span:nth-child(2){
width: 150px;
height: 100px;
background: red;
margin-right: 5px;
flex:1;
}
.container>span:nth-child(3){
width: 150px;
height: 100px;
background: blue;
margin-right: 5px;
}
</style>
效果:
(2)align-self单独设置每个子项的位置
效果:
(3)order设置item顺序
使用案例:
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
}
.container>span:nth-child(1){
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
order: 5;
}
.container>span:nth-child(2){
width: 150px;
height: 100px;
background: red;
margin-right: 5px;
order: 1;
}
.container>span:nth-child(3){
width: 150px;
height: 100px;
background: blue;
margin-right: 5px;
}
</style>
效果:
总结完毕,flex布局能用到的就这些!