弹性布局有哪些？弹性布局flex的根本利用（附代码）
怎样利用弹性规划，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid #ccc;
box-sizing: border-box;
}
.box{
height:20vh;
display: flex;
}
.box div{
flex: 1;
}
.box div:last-child{
flex: 2;
}
</style>
</head>
<body>
<div>
<div>Document1</div>
<div>Document2</div>
<div>Document3</div>
<div>Document4</div>
<div>Document5</div>
</div>
</body>
</html>运转结果如下：
容器的设定
flex有6个属性可以设定：
flex-direction:row(主轴由左向右，默许) / row-reverse（主轴由右向左） / column （主轴由上向下）/ column-reverse （主轴由下向上） 决议主轴的标的目的
flex-wrap:nowrap（默许，不换行） / wrap(换行) / wrap-reverse(换行，第一行鄙人方) 决议项目在一条轴线上排不下时的换行方式
flex-flow：是上面两个属性的简写模式 默许值：flex-flow：row nowrap。
justify-content：flex-start(默许值，左对齐) / flex-end（右对齐） / center（居中） / space-between（两端对齐，项目之间的间隔相等） /
space-around（每个项目之间的间隔相等，所以项目之间的间隔比项目与边框之间的价钱大一倍）; 决议项目在主轴上的对齐方式。space-between/around在自顺应调理间距时很有用
align-items：flex-start（穿插轴的起点对齐） / flex-end（穿插轴的终点对齐） / center（穿插轴的中点对齐） / baseline（项目的第一行文字的基线对齐）/stretch（默许值，若项目未设定高度或设定为auto，项目将占满这整个容器的高度）。 定义项目在穿插轴上的对齐方式
align-content：flex-start（与穿插轴的起点对齐） / flex-end（与穿插轴的终点对齐） / center（与穿插轴的中点对齐） /
space-between（与穿插轴的两端对齐，轴线之间的间隔均匀分布） /space-around（每跟轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍）
/ stretch（默许值，轴线占满整个穿插轴）。定义多根轴线的对齐方式，假如项目自有一根轴线，该属性不起作用
项目的属性设定
order：定义项目的摆列次序，数字越小，摆列越靠前，默许为0.
flex-grow：定义项目的放大比例，默许为0，默许状况下即便有剩余空间项目也不会放大。缩放的标的目的为flex-direction的标的目的。
flex-shrink：定义项目的缩小比例，默许为1，空间不足时，该项目会缩小。其值为0表示不缩小.缩放的标的目的为flex-direction的标的目的。
flex-basis：定义了在分配余外空间此前，项目占据的主轴空间（main size），阅读器按照这个属性没运算主轴可否有余外空间，默许值为 auto，即项目的原本大小。flex-basis：80px；宽度（标的目的为row）设定为80px；
flex：是上面三个属性的简写，默许值为 0 1 auto.有两个快速值：auto（1 1 auto）和none（0 0 auto）
align-self：该属性同意耽误项目与其他项目不一样的对齐方式，课覆盖align-items的属性值。默许值为auto，表示继承父元素的align-items属性，假如没有父元素，则为stretch。
align-self：auto / flex-start / flex-end / center /baseline /stretch flex-basis:值为0与auto（默许）时的不同：前者没有将整个项目停止运算，而后者则是忽略内容停止算的，所以假如规划是需要的是每个项目的百分比配置，则应当将flex-basis设定为0.
相关引荐：
HTML中弹性规划（Flex）的介绍（附代码）
以上就是弹性规划是啥？弹性规划flex的根本利用（附代码）的具体内容，更多请关注百分百源码网其它相关文章！
