HTML flex 布局方式

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

HTML flex 布局方式_第1张图片

 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>


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

HTML flex 布局方式_第2张图片

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

你可能感兴趣的:(HTML flex 布局方式)