弹性盒子模型使用技巧

时间: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的高度,然后就会产生滚动条了,同理 右边的大概也是这样的。

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

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