flex(弹性盒子,伸缩盒)
-是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局
-flex可以使元素具有弹性,让元素可以根据页面的大小的改变而改变
-弹性容器
-要使用弹性盒,必须先将一个元素设置为弹性容器
-通过display来设置弹性容器
display:flex 设置块级弹性容器
display:inline-flex 设置为行内的弹性容器
-弹性元素
-弹性容器的直接子元素是弹性元素(弹性项)
注意:一个元素可以同时是弹性容器和弹性元素
一:弹性容器的属性
1:flex-direction 2:flex-wrap
3:flex-flow 4:justify-content
5:align-items 6:align-content
1:flex-direction: ; 指定容器中弹性元素的排列方式
可选值:
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>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
flex-direction:column-reverse;
}
li {
width: 100px;
height: 100px;
background-color: #bfa;
font-size: 50px;
line-height: 100px;
text-align: center;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: orange;
}
/* span{
background-color: pink;
display: inline-flex;
} */
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- <span>
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
</span> -->
</body>
</html>
2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行
可选值:
nowrap 默认值,元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
3:flex-flow:wrap和direction的简写属性,且没有顺序要求
默认值 row nowrap
4:justify-content 如何分配主轴上的空白空间(主轴上的元素如何排列)
可选值:
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧(兼容性差一些)
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 500px;
height: 500px;
border: 10px red solid;
display: flex;
/* flex-direction: row; */
/* flex-wrap: wrap; */
flex-flow: row wrap;
justify-content:flex-start;
/* align-items: stretch; */
align-content: center;
}
li {
width: 100px;
height: 100px;
background-color: #bfa;
font-size: 50px;
line-height: 100px;
text-align: center;
}
li:nth-child(2n) {
background-color: pink;
}
li:nth-child(3n) {
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
1: flex-direction: row;
2:flex-wrap:wrap-reverse;
3: flex-flow:row wrap;
4: justify-content:space-around;
5: align-items 在辅轴上如何对齐-元素间的关系
可选值:
stretch 默认值,将同一行元素的长度设置为相同的值
flex-start 元素不会拉伸, 沿着辅轴起边对齐
flex-end 元素不会拉伸, 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐(用的不对)
6: align-content: ;辅轴空白空间的分布
可选值:
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧(兼容性差一些)
需求:在弹性盒子里,元素时间正中间居中对齐
justify-content: center;
align-items: center;
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
height: 600px;
border: 10px red solid;
}
li {
width: 100px;
background-color: #bfa;
font-size: 50px;
line-height: 100px;
text-align: center;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: orange;
}
li:nth-child(4) {
background-color: red;
}
li:nth-child(5) {
background-color: cadetblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2
<div>2</div>
</li>
<li>3
<div>3</div>
<div>3</div>s
</li>
</ul>
</body>
</html>
弹性元素的属性
1、order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2、flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
3、flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
4、flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,
即项目的本来大小。
5、flexflex:属性是flex-grow, flex-shrink 和 flex-basis的简写,
默认值为0 1 auto。后两个属性可选。
6、align-self:允许单个项目有与其他项目不一样的对齐方式,
可覆盖align-items属性。默认值为auto,
表示继承父元素的align-items属性,如果没有父元素,
则等同于stretch。
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 500px;
border: 10px red solid;
display: flex;
flex-direction: column;
align-items: flex-end;
}
li {
width: 100px;
height: 100px;
background-color: #bfa;
font-size: 50px;
line-height: 100px;
text-align: center;
}
li:nth-child(1){
flex-grow: 1;
}
li:nth-child(2) {
background-color: pink;
/* order: -1; */
/* flex-grow: 1; */
/* flex-shrink: 2; */
/* flex-basis: 200px; */
align-self:center;
}
li:nth-child(3) {
background-color: orange;
/* order: -2; */
/* flex-grow: 1; */
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!-- <li>1</li>
<li>2</li>
<li>3</li> -->
</ul>
</body>
</html>