弹性布局
弹性布局1.什么是弹性布局flex(弹性盒，伸缩盒)弹性布局是css中又一种布局手段，它主要代替浮动来完成页面的布局。flex可以使元素具有弹性，让元素可以跟着页面大小的改变而改变2.怎么实现弹性布局弹性容器:要使用弹性盒，必须先将一个元素设置为弹性容器我们通过display来设置弹性容器display:flex 来设计为块级弹性容器display:inline-flex 设计为行内的弹性容器弹性
1.什么是弹性布局
flex(弹性盒，伸缩盒)
弹性布局是css中又一种布局手段，它主要代替浮动来完成页面的布局。
flex可以使元素具有弹性，让元素可以跟着页面大小的改变而改变
2.怎么实现弹性布局
弹性容器:要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
display:flex 来设计为块级弹性容器
display:inline-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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 800px;
border: 10px solid red ;
display: flex;
flex-direction: row;
}
.a li{
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
height: 100px;
width: 100px;
background-color:red ;
}
.a :nth-of-type(1)
{
background-color: yellow;
}
.a :nth-of-type(2)
{
background-color: red;
}
.a :nth-of-type(3)
{
background-color: pink;
}
.a :nth-of-type(4)
{
background-color: green;
}
.a :nth-of-type(5)
{
background-color: blue;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
主轴:弹性元素的排列方向成为主轴
侧轴:与主轴垂直方向的称为侧轴
flex-direction:row(默认值，弹性元素在容器中水平排列（从左向右排列）)
------主轴: 从左向右
flex-direction:row-reverse(弹性元素在容器中反向水平排列（从右向左排列）)
------主轴: 从右向左
flex-direction:column(弹性元素在容器中纵向排列（自上向下排列）)
------主轴: 自上向下
flex-direction:column-reverse(弹性元素在容器中反向纵向排列（自下向上排列）)
------主轴: 自下向上
flex-wrap(设置弹性元素是否在弹性容器中自动换行)
flex-wrap:nowrap;(默认值 元素不会自动换行)
.a{
width: 400px;
border: 10px solid red ;
display: flex;
flex-wrap: nowrap;
}
.a li{
flex-shrink: 0;
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
height: 100px;
width: 100px;
background-color:red ;
}
flex-wrap:wrap;(元素沿着辅轴方向自动换行)如果元素是从左向右排列的，那么辅轴就是自上向下（向下排列）
flex-wrap:wrap-reverse;(元素沿着辅轴反方向换行)如果元素是从左向右排列的，那么辅轴就是自下向上（向上排列）
flex-flow(wrap和direction的简写属性)
flex-flow:row wrap;
.a{ width: 400px; border: 10px solid red ; display: flex; flex-flow: row wrap; }
justify-content(（主轴上的元素如何排列）（如何分配主轴上的空白空间）)
justify-content:flex-start;(元素沿着主轴起边排列)
.a{
width: 800px;
border: 10px solid red ;
display: flex;
/* flex-flow: row wrap; */
justify-content: flex-start;
}
.a li{
flex-shrink: 0;
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
height: 100px;
width: 100px;
background-color:red ;
}
justify-content:flex-end;(元素沿着主轴终边排列)
justify-content:center;(元素居中排列)
justify-content:space-around;(空白分布到元素两侧（中间的距离比两边的距离大）)
justify-content:space-between;(空白均匀分布到元素的中间)
justify-content:space-evenly;(空白分布到元素的单侧（每一边的距离一样）)
align-items(元素在辅轴上如何对齐（元素间的关系）)
<!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;
}
.a{
width: 300px;
height: 600px;
border: 10px solid red ;
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.a li{
flex-shrink: 0;
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
width: 100px;
background-color:red ;
}
.a :nth-of-type(1)
{
background-color: yellow;
}
.a :nth-of-type(2)
{
background-color: red;
}
.a :nth-of-type(3)
{
background-color: pink;
}
.a :nth-of-type(4)
{
background-color: green;
}
.a :nth-of-type(5)
{
background-color: blue;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
align-items:stretch(默认值 将元素的长度设置为相同的值)设置行与行的高度(每一行的高度是相同的) 并不是所有行的高度都是一样的
align-items:flex-start;(元素不会拉伸，沿着辅轴起边对齐)
align-items:flex-end;(元素不会拉伸，沿着辅轴终边对齐)
align-items:center;(元素不会拉伸，居中对齐)
align-content(设置辅轴空白空间的分布)
align-content:center(上下的空白相等，元素在中间)
align-content:flex-start(元素靠上对齐，空白在下面)
align-content:flex-end(元素靠下对齐，空白在上面)
align-content:space-around；(用法同justify-content一样)
align-content:space-between；(用法同justify-content一样)
align-content:space-evenly;(用法同justify-content一样)
设置元素垂直水平居中:justify-content:center;(水平方向) align-items:center;(垂直方向)
弹性元素:弹性容器的子元素是弹性元素（弹性项）
一个元素可以同时是弹性元素和弹性容器
注意:弹性元素的直接子元素才是弹性元素（后代元素不是）
弹性元素的属性:
flex-grow(指定弹性元素的伸展的系数)----当父元素有多余空间时，子元素如何伸展。
--------父元素的剩余空间会按照比例进行分配flex-grow:0(默认值 不占据剩余空间)
flex-grow:1(平均分配剩余空间把盒子占满)值越大分配的空间越大
.a :nth-of-type(1)
{
flex-grow:1;
background-color: yellow;
}
.a :nth-of-type(2)
{ flex-grow:2;
background-color: red;
}
.a :nth-of-type(3)
{
flex-grow:3;
background-color: pink;
}
.a :nth-of-type(4)
{
flex-grow:4;
background-color: green;
}
.a :nth-of-type(5)
{
flex-grow:5;
background-color: blue;
}
flex-shrink(指定弹性元素的收缩系数)------当父元素中的空间不足以容纳所有子元素时，如何对子元素进行收缩。flex-shrink:1;(默认值 等比例收缩)
.a{
width: 200px;
border: 10px solid red ;
display: flex;
/* flex-wrap: nowrap; */
}
.a li{
flex-shrink: 1;
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
height: 100px;
width: 100px;
background-color:red ;
}
flex-shrink:0;(不会收缩)缩减多少是根据 缩减系数和元素大小来决定（元素越大缩减的越多）
.a :nth-of-type(1)
{
flex-shrink: 1;
background-color: yellow;
}
.a :nth-of-type(2)
{
flex-shrink: 2;
background-color: red;
}
.a :nth-of-type(3)
{
flex-shrink: 3;
background-color: pink;
}
.a :nth-of-type(4)
{
flex-shrink: 4;
background-color: green;
}
.a :nth-of-type(5)
{
flex-shrink: 5;
background-color: blue;
}
align-self(用来覆盖当前弹性元素上的align-items)(单独为某一个元素设置align-items)
.a :nth-of-type(1)
{
align-self: stretch;
background-color: yellow;
}
flex-basis:auto;(设置元素在主轴上的基础长度)auto是默认值，表示参照元素自身的高度和宽度，如果传递了一个具体的数值，则以该值为准。
如果主轴是 横向 的 则 该值指定的就是元素的宽度
如果主轴是 纵向 的 则 该值指定的就是元素的高度
.a{
width: 600px;
border: 10px solid red ;
display: flex;
flex-flow: row wrap;
}
.a li{
flex-basis: 50px;
/* flex-grow: 1; */
flex-shrink: 1;
font-size: 50px;
line-height: 100px;
text-align: center;
list-style: none;
width: 100px;
background-color:red ;
}
flex 可以设置弹性元素的三个样式（增长 缩减 基础）
flex:initial(默认值 相当于flex:0 1 auto;)
flex:auto（相当于 flex:1 1 auto;）
flex:none（相当于 flex:0 0 auto;）
order:1;(决定弹性元素的排列顺序 把元素排列到第一个)
.a :nth-of-type(1)
{
order: 5;
background-color: yellow;
}
.a :nth-of-type(2)
{
order: 3;
background-color: red;
}
.a :nth-of-type(3)
{
order: 2;
background-color: pink;
}
.a :nth-of-type(4)
{
order: 4;
background-color: green;
}
.a :nth-of-type(5)
{
order: 1;
background-color: blue;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
16
0- 0
已为社区贡献4条内容
所有评论(0)