css

最新推荐文章于 2022-05-14 16:15:00 发布

妖々晶

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/qq_44072568/article/details/103569679

版权

弹性布局

今天写了一段关于弹性布局的一段代码，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。这种布局可以使页面内的元素或模块可以根据浏览器的窗口的大小而发生改变，以此来适应窗口给浏览者提供方便。
首先要创建一个页面

<!DOCTYPE html>
<html>
<head>
  <meta charset=" utf-8">
  <title>弹</title>
  </head>
<body>
<div class="flex-wrap">
  <div class="flex">
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
    <div class="reme"></div>
  </div>
</div>
</body>
</html>

大体布局创建好之后，可以将页面先修饰一番。

      color:#666;
      font-weight:bold;
    
    p{
      padding:0;
      border:0 solid #FFC8C8;
      background:#fff;
      border-radius:10px;
      color:#A70000;
    }

其中文本的部分的可以自行填写或不写，页面设置好后，开始添加弹性元素flex，

.flex-wrap{
      border:3px double #111;
      padding:10px;
    }

    .flex{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      flex-wrap:wrap;
    }

    .flex .reme{
      width:300px;
      height:120px;
      background:#65fc54;
      line-height:50px;
      font-size:20px;
      color:#fff;
      text-align:center;
    }

再将上述代码写入就可以得到一个完整的弹性页面。效果如下。
这是放大之前的
这是铺满整个屏幕的效果

妖々晶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css

弹性布局今天写了一段关于弹性布局的一段代码，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。这种布局可以使页面内的元素或模块可以根据浏览器的窗口的大小而发生改变，以此来适应窗口给浏览者提供方便。首先要创建一个页面<!DOCTYPE html><html><head> <meta charset=" ...
复制链接

扫一扫