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" /><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;
}

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

div宽度自动充满剩余空间
一.项目场景例如:页面顶部分三部分,左侧宽度固定,中间宽度由文字撑开,右侧自动填充剩余宽度二.解决方案使用fflex-grow 属性用于设置或检索弹性盒子的扩展比率.. 注意:如果元素不是弹性盒 ...
05移动端布局基础之flex弹性布局项目实战(携程移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.携程网移动端首页打开网址:m.ctrip.com 2.技术选型方案:采取单独制作移动页面方案技术:布局采取flex布局 3.搭建相关文件 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
flex弹性布局教程-04项目属性flex-grow
本节目标掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
flex弹性布局教程-09-容器属性flex-flow
本节目标掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要本篇介绍了容器属性 flex-flow,是 ...
flex弹性布局的用法
1.概念: flex弹性布局是css3的新一种布局方式,用来为盒状模型提供最大的灵活性,元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 2.用法: 1)首先在我们不使用flex弹性布 ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...

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

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

最新文章

热门文章