学习完了flex布局,觉得很有用,然后就写了这么一篇博客来做个总结。(提前说明一下,我是跟随b站上某位很出名老师的指导完成的学习,可能有同学和我学习了同样的内容。)
flex布局是非常实用的一种前端布局,在不少主流前端语言都有出现,今天我们主要以HTML为案例。
一、基础代码展示和效果体验
1.下面将是我们页面的基础代码,所有的改变将以本代码为基础,添加的绝大部分改变可添加入style标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2.代码体验
1)有无display:flex对比
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
background-color:purple;
margin-right: 5px;
}
</style>
效果展示:
1、flex布局基本演示
2、去掉display:flex代码效果
2)平均分三等分
其余代码不变,将style中部分代码代替
div span {
height: 100px;
background-color:purple;
margin-right: 5px;
flex: 1;
}
效果展示:三等分
flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
,任何一个容器都可以指定为flex布局
当父元素设为flex布局后,子元素的float,clear和vertical-align属性失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
上述代码中div是flex父容器,span是子容器,子容器可横向排列也可纵向排列。
二、flex布局父项属性
属性 | 作用 |
---|---|
flex-direction | 设置主轴方向 |
justify-content | 设置主轴上子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-content | 设置侧轴上子元素排列方式(多行) |
align-items | 设置侧轴上子元素排列方式(单行) |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-wrap |
1.flex-direction
主轴和侧轴:默认主轴x轴方向,水平向右;默认侧轴y轴方向,水平向下
元素跟着主轴排列
属性值 | 说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
2.justify-content
属性值 | 说明 |
---|---|
flex-start | 默认值从头部开始如果主轴是≯轴,则从左刳右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是×轴则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边再平分剩余空间(重要) |
横向space-between排列:
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
flex-direction: row;
justify-content: space-between;
}
div span {
height: 100px;
width: 150px;
background-color:purple;
margin-right: 5px;
}
</style>
纵向space-between
<style>
div {
display: flex;
width: 80%;
height: 500px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
div span {
height: 100px;
width: 150px;
background-color:purple;
margin-right: 5px;
}
<style>
3.flex-wrap设置子元素是否换行
flex布局中默认不换行,内部元素缩小
属性值 | 说明 |
---|---|
nowrap | 默认值,不换行 |
wrap | 换行 |
4.align-items设置侧轴上子元素排列方式(单行)
属性值 | 说明 |
---|---|
flex-start | 默认值从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸 |
1)居中对齐:
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
justify-content:center;
align-items: center;
}
div span {
height: 100px;
width: 150px;
background-color:purple;
color: #ffffff;
margin: 10px;
}
<style>
2)改变方向为纵向
flex-direction: column;
3)侧轴拉伸,子盒子不给高度
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
justify-content:center;
align-items: stretch;
}
div span {
/* height: 100px; */
width: 150px;
background-color:purple;
color: #ffffff;
margin: 10px;
}
</style>
5.align-content设置侧轴上子元素排列方式
用于子项出现换行的情况,单行下无效果
属性值 | 说明 |
---|---|
flex-start | 默认值在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
align-content和align-items区别
- align- items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align- content适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 单行:align-items,多行:align-content
6.flex-flow属性是flex-direction和flex-wrap复合属性
flex-flow: column wrap;
三、flex布局子项常见属性
flex子项目占得份数,定义子项目分配剩余空间,用flex表示占得份数
<style>
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2){
flex: 1;
background-color: green;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
<style>
p span{
flex: 1;
}
p span:nth-child(2){
flex: 2;
background-color: purple;
}
</style>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
align-self控制子项自己在侧轴排列顺序
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span{
width: 150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
order属性定义子项排列顺序(前后顺序)
数值越小,排名越靠前
<style>
div span:nth-child(2){
order: -1;
}
</style>