文档章节

HTML flex 布局方式

HonChy
 HonChy
发布于 2014/12/13 00:17
字数 468
阅读 249
收藏 0

比起其他的方式,此种方式兼顾到兄弟元素的大小。会自动填补兄弟元素剩余的部分。当然他需要一个flex的容器作为总空间,然后需要和兄弟元素的分配比例和大小,然后需要分配空间的方向,垂直or水平。

 http://mweb.baidu.com/p/web-components-introduction.html#more-489  这里展示了一个非常棒的示例,我要手动试验下。

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DocType html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.app-info {
  padding: 0.2em;
  border-bottom: 1px dotted #ddd;
}
.app-bar {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.app-name {
  flex-grow: 2;
  margin-left: 1em;
}
.app-downbtn {
  text-decoration: none;
  padding: 0.2em 1.1em;
  margin-right: 1em;
  color: #fff;
  background: #5573eb;
}
.app-description {
  font-size: 12px;
}
</style>
</head>
<body>
<div class="app-info">
  <div class="app-bar">
    <img class="app-icon" src="http://img.dayanjia.com/di/TOY7/6c2442a7d933c8950f39059ed31373f083020094.png" width="36" height="36"/>
    <div class="app-name">百度手机助手</div>
    <a class="app-downbtn" href="http://gdown.baidu.com/data/wisegame/de5074e4e28aecec/baidushoujizhushou_16783385.apk">下载</a>
  </div>
  <p class="app-description">
    百度手机助手是Android手机的权威资源平台,拥有最全最好的应用、游戏、壁纸资源,帮助您在海量资源中精准搜索、高速下载、轻松管理,万千汇聚,一触即得。海量资源:免费获取数十万款应用和游戏,更有海量独家正版壁纸,任你挑选。
  </p>
</div>
</body>
</html>


效果如下:注意啦,图片和文本居然垂直居中了,这简直是神器啊!!!

神器啊神器。以前在是用line-height居中的时候,不认直视,总会有一小段距离不能垂直居中对齐。

© 著作权归作者所有

共有 人打赏支持
HonChy
粉丝 12
博文 100
码字总数 87679
作品 0
海淀
程序员
私信 提问
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear
2018/05/29
0
0
给萌新的Flexbox简易入门教程

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 【年末促销】葡萄城 2018 岁末福利火热放送中 原文出处:https://www.sitepoint.com/flexbox...

葡萄城技术团队
2018/11/22
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
0
0
微信小程序开发之——flex布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SundayAaron/article/details/53487637 打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码。 fl...

SundayAaron
2016/12/06
0
0
前端入门5-CSS弹性布局flex

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nacos之springboot

本地操作系统:ubuntu18,我使用docker的方式启动nacos服务 docker image方式启动nacos 在docker hub上可以搜到nacos-server List-1.1 拉去最新的版本 mjduan@mjduan-ubuntu:/opt/software$ ...

克虏伯
23分钟前
2
0
指针数组和数组指针的区别

这两个名字不同当然所代表的意思也就不同。我刚开始看到这就吓到了,主要是中文太博大精深了,整这样的简称太专业了,把人都绕晕了。从英文解释或中文全称看就比较容易理解。 指针数组:arr...

天王盖地虎626
55分钟前
3
0
Qt那些事0.0.18

今天要记一下Qt中的Resource。自我感觉理解的不错,但是还会难免有谬误,在日后有可能会更新,也有可能不会。 小声的念叨一句,女人心,海底针。 今天就直接跳过了关于QML在qrc文件中的介绍,...

Ev4n
今天
2
0
深入解析js的作用域、预解析机制

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。 概念: 作用域:域,指的是一个空间、范围、区域,...

前端攻城老湿
今天
2
0
Spring Cloud Feign - 声明式 REST Client

1、Feign是什么 声明式REST client,来自NetFlix。 允许你编写无实现代码调用REST services 替换RestTemplate(甚至更简单) Spring Cloud 为使用Feign提供了包装器 2、怎样使用Feign 对比:...

Benz001
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部