Web实现：flex弹性布局项目自动充满剩余空间

最新推荐文章于 2024-03-06 14:14:57 发布

jasmyn518

最新推荐文章于 2024-03-06 14:14:57 发布

阅读量1.7k

点赞数 1

分类专栏： HTML 笔记 CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/jasmyn518/article/details/123275856

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

弹性布局
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>Flex 布局</title>
  </head>
  <body>
    默认情况，不设置flex属性：
    <div class="container">
      <div class="item ding">
        <div class="logo"></div>
        <span>钉钉好友</span>
      </div>
      <div class="item wb">
        <div class="logo"></div>
        <span>新浪微博</span>
      </div>
      <div class="item copy">
        <div class="logo"></div>
        <span>复制链接</span>
      </div>
    </div>

    所有项目都设置了 flex: 1：
    <div class="container grow-all">
      <div class="item ding">
        <div class="logo"></div>
        <span>钉钉好友</span>
      </div>
      <div class="item wb">
        <div class="logo"></div>
        <span>新浪微博</span>
      </div>
      <div class="item copy">
        <div class="logo"></div>
        <span>复制链接</span>
      </div>
    </div>
  </body>
</html>

CSS部分：

.grow-all .item {
  flex: 1;
}

.container {
  width: 390px;
  background-color: #F1F1F1;
  padding: 25px 25px 0 0;
  display: flex;
}

.container .item {
  width: 52px;
  height: 65px;
  text-align: center;
  font-size: 12px;
  margin: 0 0 25px 25px;
  outline: 1px dashed #999;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  margin: 0 auto;
  margin-bottom: 8px;
}

.ding .logo {
  background: url(./images/ding.png) no-repeat center/ 18px 22px;
  background-color: #32B5F9;
}

.wb .logo {
  background: url(./images/wb.png) no-repeat center/ 22px 18px;
  background-color: #FE5757;
}

.copy .logo {
  background: url(./images/link.png) no-repeat center/ 21px 21px;
  background-color: #FFFFFF;
}

jasmyn518

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：flex弹性布局项目自动充满剩余空间

HTML部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> .
复制链接

扫一扫