HTML flex 布局方式

最新推荐文章于 2023-06-19 20:03:10 发布

weixin_34125592

最新推荐文章于 2023-06-19 20:03:10 发布

阅读量159

点赞数

原文链接：https://my.oschina.net/honchy/blog/355674

版权

为什么80%的码农都做不了架构师？>>>

比起其他的方式，此种方式兼顾到兄弟元素的大小。会自动填补兄弟元素剩余的部分。当然他需要一个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>

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