文章目录
flex布局
1.flex布局原理
flex布局是 flexible Box 的缩写,意为:”弹性布局“,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex 布局。
- 当我们为盒子设为flex 布局以后,子元素的 float、 clear 和 vertical-align 属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。
采用 flex 布局的元素,称为 flex 容器(flex container),简称 “容器” 。它的所有子元素自动成容器成员,称为 flex 项目(flex item),简称 “项目”。
总结:
就是通过给父级盒子添加 flex属性,来控制盒子的位置和排列方式。
2.常见父项属性
flex-direction | 设置主轴的方向(默认为x轴) |
---|---|
justify-content | 设置主轴上的子元素排列方式 |
flex-warp | 设置子元素是否换行 |
align-content | 设置侧轴上的子元素排列方式(多行) |
align-items | 设置侧轴上的子元素排列方式(单行) |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-warp |
(1)flex-direction 设置主轴的方向
注意:将X轴或Y轴设置为主轴后,另一个轴将默认为侧轴。
属性值:
row | 默认值 从左到右 |
---|---|
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
<!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>flex_direction</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
justify-content: center;
/* flex-direction设置主轴的方向 默认为x轴
* row :默认值 X轴
* row-reverse: 从右到左
* column:从上到下 (Y轴)
* column-reverse:从下到上
*/
flex-direction: column;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
</div>
</body>
</html>
本例展示了将容器的主轴设置为 Y轴。效果图如下所示:
(2)justify-content属性 —— 设置主轴上子元素的排列方式
属性值:
flex-start | 默认值 从头部开始 如果主轴是X轴,则从左到右 |
---|---|
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是X轴则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边,再平分剩余空间(重点) |
<!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>justify-content属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*
justify-content 设置主轴上子元素的排列方式
* flex-start:默认值 从头部开始
* flex-end:从尾部开始
* center:在主轴居中对齐(如果主轴是X轴则水平居中)
* space-around:平分剩余空间
* space-between:先两边贴边,再平分剩余空间
*/
justify-content: space-between;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
</div>
</body>
</html>
上述代码示例展示的是:space-between属性值的效果,如下图所示:
(3)flex-wrap —— 设置子元素是否换行
属性值:
nowrap | 默认值 不换行 |
---|---|
wrap | 换行 |
如下示例代码所示:
<title>flex-warp属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*
flex-wrap 设置子元素是否换行
* nowrap:默认值 不换行
* wrap:换行
*/
flex-wrap: wrap;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
</div>
</body>
如下图所示:第一张为换行效果,第二张为不换行效果。
(4)align-items 设置侧轴上的子元素排列方式(单行)
属性值:
flex-start | 默认值 从上到下 |
---|---|
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸 |
<title>align-items属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*
align-items 设置侧轴上子元素排列方式(单行内容时)
* flex-start:默认值 从上到下
* flex-end:从下到上
* center:挤在一起居中(垂直居中)
* stretch:拉伸
*/
align-items: center;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
</div>
</body>
如下图展示了align-items 为center时的效果。
(5)align-content —— 设置侧轴上的子元素排列方式(多行)
属性值:
flex-start | 默认值 在侧轴的头部开始排列 |
---|---|
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,在平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
注意:此属性只在多行情况下生效,或者就是添加了flex-wrap属性为wrap值的情况下生效。
示例代码如下:
<!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>align-content属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*
align-content 设置侧轴上子元素排列方式(多行)
* flex-start:默认值 在侧轴的头部开始排列
* flex-end:在侧轴的尾部开始排列
* center:在侧轴中间显示
* space-around:子项在侧轴平分剩余空间
* space-between:子项在侧轴先分布在两头,再平分剩余空间
* stretch:设置子项元素高度平分父元素高度
*/
flex-wrap: wrap;
align-content: space-around
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
</div>
</body>
</html>
如下图所示展示了align-content属性值为:space-around 时的效果:
(6)flex-flow 属性
flex-flow
属性是flex-direction
和 flex-wrap
属相的复合属性。
示例代码如下:
<!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>flex-flow属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*
flex-flow属性 等同于 同时使用 flex-direction属性和 flex-wrap属性
*/
flex-flow: wrap column;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
</div>
</body>
</html>
效果图如下所示:
3.常见的子项属性
- flex 子项目占的份数
- align-self 控制子项自己在侧抽的排列方式
- order 属性定义子项的排列顺序(前后顺序)
(1)flex 子项目占的份数
flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。
示例代码如下:
<!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>lex子项flex份数</title>
<style>
.container {
display: flex;
width: 600px;
height: 150px;
margin: 0 auto;
background-color: pink;
}
/*
将父元素的宽度分为6份
第一个div占3份,第二个占1份,第三个占2份
*/
.container div:nth-child(1) {
height: 150px;
width: 100px;
background-color: purple;
flex: 3;
}
.container div:nth-child(2) {
background-color: orange;
flex: 1;
}
.container div:nth-child(3) {
height: 150px;
width: 100px;
background-color: greenyellow;
flex: 2;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果图如下所示:
(2)algin-self 属性 控制子项自己在侧轴上的排列方式
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items
属性、默认为 auto,表示继承父元素的 align-items
属性,如果没有父元素,则等同于 stretch
。
auto | 设置为父元素的 align-items值,如果该元素没有父元素的话,就设置为 stretch |
---|---|
flex-start | 在自己的侧轴上 头部对齐 |
flex-end | 在自己的侧轴上 尾部对齐 |
center | flex 元素会对齐到 侧轴的中间,如果该元素的宽大于容器将在两个方向均等溢出 |
baseline | 所有的 flex 元素会沿着基线对齐 |
stretch | flex 元素将会基于容器的宽和高进行拉伸 |
<!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>align-self属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
align-items: flex-start;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
}
/*
align-self 控制子项自己在侧轴上的排列方式
* auto: 跟随父级的 algin-items属性的样式,如果该元素没有父元素的话,就设置为 stretch
* flex-start:默认值 从头部开始
* flex-end:从尾部开始
* center:在侧轴居中对齐(
* baseline:基线对齐
* stretch:拉伸
*/
.container span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
</div>
</body>
</html>
(3) order 属性定义项目的排列顺序
数值越小,排列越靠前,默认为0.
注意:该属性和
z-index
不一样
<!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>子项目order属性</title>
<style>
.container {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
}
.container span {
width: 150px;
height: 150px;
background-color: purple;
margin: 10px;
}
.container span:nth-child(2) {
/* order属性:
默认值为0 ,数值越小,元素余额靠前
*/
order: -1;
}
</style>
</head>
<body>
<div class="container">
<span>1</span><span>2</span><span>3</span>
</div>
</body>
</html>