弹性布局flex的基本应用示例

tangjin

作者

小编给大家分享一下弹性布局flex的基本应用示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

如何应用弹性布局，代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
border:1pxsolid#ccc;
box-sizing:border-box;
}
.box{
height:20vh;
display:flex;
}
.boxdiv{
flex:1;
}
.boxdiv: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.

以上是“弹性布局flex的基本应用示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-03-13 15:40:56

弹性布局