弹性盒子模型使用技巧

时间：2021-07-25 05:28:30

　　很早之前就学过了弹性盒子，就感觉自己什么都学会了，没想到到了实际的运用过程中，其实并不是那么一回事，自己根本想不到会用到哪些属性，该怎么使用。

　　这一次就只把我使用过程中遇到的一些坑来总结一下。

　　使用弹性盒子的情况还是需要去看布局的，这个属性使用起来非常爽，不需要考虑那么多，直接几行代码就完成了之前浮动布局要完成的情况，而且自适应页面的能力也要强出好多，不需要自己再去调整好久的样式像素。

　　直接上布局的样子吧。

    页面一

　　弹性盒子模型使用技巧

　　比如说上面的样式，你们可能有别的更好的布局思路，可以分享一下的哈。 我就说说我猜到的坑，因为之前根本就没有这样去写过，所以有一些细节的部分根本没有考虑过，后来写过一次之后，在看到这种布局就变得容易多了。

　　布局思路

　　　　一般我们都会把一个页面分为三部分，我们把最上面的设备监控是头部

　　　　内容部分为中间的那一大堆

　　　　底部就是下面的三个按钮的那一些

　　布局思路大概是下面的代码那个样子的，中间的部分肯定是要自适应的了，直接把剩下的高度都占满。

　　

#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 100px;
}
.content{
    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少，所以没有想到，这个属性是定义项目放大比例，默认是0，将他规定一下，然后就会把剩余的空间都给占掉
}
.footer{
    height: 200px;
}


<div id="box">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

　　重点的是中间的那一部分，因为中间部分下面的表格部分超出之后要出现滚动条，所以就是表格内容的高度的父元素的高度我拿不准，最开始直接用的是rem给写死了，后来发现有很多弊端，因为是第一次写这样的页面所以讲下面的那个没有考虑到的属性。

　　中间的部分分为两部分，黄色的一部分，六个框框，用的弹性盒子，把他们的宽度写成百分比平分，三个分一行，用的33.3%，

　　大概代码就是下面的样子的。

　　

ul{
    display: flex;
    flex-wrap: wrap;
}
ul li{
    width: 33.3%;
    height: xxx;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

　　下面的那个表格要超出出现滚动条，刚才说了我第一次布局的过程中把他父元素的高度给写死了，然后在自适应的过程中出现了一些问题，可以把中间的部分也写成一个弹性盒子，然后上面的那个八个黄色框框的父元素高度给定住，然后下面的部分用到那个flex-grow属性，直接把下面的那一些东西都给占住。

　　大概和最开始头部中间部分底部的布局差不多。

　　弹性盒子模型使用技巧

 

　　页面二

　　弹性盒子模型使用技巧

 

　　还是只看中间的部分吧

　　中间的部分是左右划分的，所以也可以使用弹性盒子，左右的宽度用百分比规定好， 30%  70% 然后就可以横排显示，注意写好他们的高度

　　右边部分又分为上下两部分

弹性盒子模型使用技巧

　　这里是右边上半部分的布局，写的好多了，所以也就没有考虑其他的东西了，左右部分大概就两种写法了我

　　第一种

　　　　左边用rem固定死， 右边使用flex-grow 分配多余的剩余的空间。

　　第二种

　　　　两部分都使用百分比

 　　里面的小东西在使用自己的方式写就好了，右边的绿色的也可以使用弹性盒子。

页面三

　　弹性盒子模型使用技巧

　　也是只介绍一下中间的部分吧。分为左右部分，然后内容超出之后也要出现滚动条。

　　这一种的头部，内容部分，底部用到的还是最开始讲的那种，中间部分占掉剩余下来的空间。

　　中间的部分分为左右两部分，高度的话因为使用了flex-grow这个东西，所以把黄色盒子应该还有一个父元素和他一样大，不说了，上代码吧

　　这里大概模拟一下中间的代码

弹性盒子模型使用技巧

这个就是中间的所有的东西，大概就是content的高度是中间部分的实际高度， 左部分 div.left部分的东西的高度写成100%，适应到中间部分的所有高度，然后设置超出产生滚动条  overflow:scroll，里面的ul就直接那样就可以了，把ul设置成弹性盒子，然后里面的东西多的话就会超过 div.left的高度，然后就会产生滚动条了，同理 右边的大概也是这样的。

　　感觉今天会加班，然后头有点疼就想写点东西，没想到直接可以下班了~~~

　　坚持写完了，如果你看了我的文章学到了东西我会非常高兴的，回家咯 嘿嘿

 

标签：

相关文章