用Flex实现的百分比布局

最新推荐文章于 2025-06-13 00:15:08 发布

frank201113

最新推荐文章于 2025-06-13 00:15:08 发布

阅读量2.1w

点赞数 4

CC 4.0 BY-SA版权

文章标签： flex css3 布局

本文链接：https://blog.csdn.net/Handsome_fan/article/details/70199238

本文介绍了一种使用CSS3 flex属性实现的移动端百分比布局方法。通过设置不同的flex值，可以轻松实现各种比例的布局，适用于多种屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹性布局在移动端页面非常的有用，弹性布局主要利用的是CSS3的flex属性。

下面分享一个用flex来实现百分比布局的方法，这在移动端中是很常用的一种适配方法。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Flex布局</title>
   <style type="text/css">
   .Grid{
       display: flex;
   }
   .Grid-cell{
       flex: 1;
   }
   .Grid-cell.u-full{
       flex: 0 0 100%;
   }
   .Grid-cell.u-1of2{
       flex: 0 0 50%;
   }
   .Grid-cell.u-1of3{
       flex: 0 0 33.3333%;
   }
   .Grid-cell.u-1of4{
       flex: 0 0 25%;
   }
   </style>
</head>
<body>
   <div class="Grid">
       <div class="Grid-cell u-1of4" style="background-color: #2D82FF">1/4</div>
       <div class="Grid-cell" style="background-color: #6DDA79">auto</div>
       <div class="Grid-cell u-1of3" style="background-color: #46A0CE">1/3</div>
   </div>
   <p></p>
   <div class="Grid">
       <div class="Grid-cell" style="background-color: #2D82FF">auto</div>
       <div class="Grid-cell u-1of3" style="background-color: #6DDA79">1/3</div>
   </div>
   <p></p>
   <div class="Grid">
       <div class="Grid-cell u-1of2" style="background-color: #2D82FF">1/2</div>
       <div class="Grid-cell" style="background-color: #6DDA79">auto</div>
       <div class="Grid-cell" style="background-color: #46A0CE">auto</div>
   </div>

</body>
</html>