一、什么是Flex?
Flex(Flexible Box)是CSS3中的一种布局模型,用于创建灵活的盒子布局。它允许容器中的子元素自动调整大小和位置,以适应不同的屏幕尺寸和设备。
二、Flex布局原理
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。采用flex布局的元素称为容器, flex布局中的子元素称为项目
三、布局父项常用属性
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素排列方式(多行)
- align-items:设置侧宙上的子元素排列方式(单行)
- flex-flow:复和属性,相当于同时设置了flex-direction和flex-wrap
1.flex-direction:设置主轴的方向
flex-direction属性决定主轴的方向(即子项目的排列方向)默认是行(row)。
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而我们的子元素都是跟着主轴来排列的
属性值 | 说明 |
---|---|
row | 默认从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
实例:
<!DOCTYPE html>
<html4 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 500px;
height: 500px;
background-color: pink;
margin:100px auto;
display:flex;
/* 默认是row */
flex-direction:row ;
}
.b1{
width: 100px;
height: 100px;
background-color: purple;
}
.b2{
width: 100px;
height: 100px;
background-color: blue;
}
.b3{
width: 100px;
height: 100px;
background-color: red;
}
.b4{
width: 100px;
height: 100px;
background-color: rgb(37, 192, 40);
}
</style>
<body>
<div class="box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
</body>
</html>
效果图:沿着主轴方向排开
如果是 flex-direction: column;效果将是这样。
2.justify-content:设置主轴上的子元素排列方式
属性值 | 说明 |
---|---|
flex-start | 默认值从头部开始,如果主轴是x轴,则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边 再平分剩余空间(重要) |
(1)justify-content:flex-start;(当前主轴方向为X轴)
(2)justify-content:flex-end;(当前主轴方向为X轴)
(3)justify-content:center;(当前主轴方向为X轴)
(4)justify-content:space-around;(当前主轴方向为X轴)
(5)justify-content:space-between;(当前主轴方向为X轴)
3. flex-wrap:设置子元素是否换行
默认情况下,项目都排在一条线上(轴线),flex-wrap属性定义,flex布局默认是不换行的。
属性值:nowrap:不换行 wrap:换行
display: flex;
justify-content: center;
/*!* 默认子元素不换行,如果装不开,会缩小元素的宽度,放到父元素里面 *!*/
flex-wrap: wrap;
4.align-items:设置侧轴上的子元素排列方式(单行)
该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项的时候使用
属性值 | 说明 |
---|---|
flex-start | 默认值 从上到下 |
center | 挤在一起居中(垂直居中) |
flex-end | 从下到上 |
stretch | 拉伸 |
(1)align-items:flex-start;
(2)align-items:center;
(3)align-items:flex-end;
(4)align-items:stretch;
此项属性要去掉height的影响。
5.align-content:设置侧轴上的子元素排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),单行的情况下是无效的。
属性 | 声明 |
---|---|
flex-start | 默认值在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
7. flex-flow:复和属性,相当于同时设置了flex-direction和flex-wrap
8.align-content和align-items的区别
- align-items 适用于单行情况下,只有上对齐、下对其、居中和拉伸
- align-content 适用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值.
- 总结就是单行找align-items多行找align-content
四、子项常用属性
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order 属性定义子项的排列顺序(前后顺序)
1. flex 属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。
例:圣杯布局
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 110px;
height: 150px;
background-color: rgb(149, 173, 227);
}
section div:nth-child(3){
width: 110px;
height: 150px;
background-color: rgb(52, 229, 111);
}
section div:nth-child(2){
width: 110px;
height: 150px;
flex: 1;
background-color: rgb(228, 25, 25);
}
2.等分
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 110px;
flex: 1;
height: 150px;
background-color: rgb(149, 173, 227);
}
section div:nth-child(3){
width: 110px;
height: 150px;
flex: 1;
background-color: rgb(52, 229, 111);
}
section div:nth-child(2){
width: 110px;
height: 150px;
flex: 1;
background-color: rgb(228, 25, 25);
}
3. align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto。
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 450px;
background-color: pink;
}
section div:nth-child(1){
width: 150px;
height: 150px;
background-color: red;
}
section div:nth-child(3){
width: 150px;
height: 150px;
align-self: flex-end;
background-color: blue;
}
section div:nth-child(2){
width: 150px;
height: 150px;
background-color: green;
}
3 order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0
section div:nth-child(3){
width: 150px;
height: 150px;
/* align-self: flex-end; */
background-color: blue;
order: -2;
}