flex html 控件 开源,HTML flex 布局方式

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

html>

.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;

}

    

百度手机助手

下载

百度手机助手是Android手机的权威资源平台，拥有最全最好的应用、游戏、壁纸资源，帮助您在海量资源中精准搜索、高速下载、轻松管理，万千汇聚，一触即得。海量资源：免费获取数十万款应用和游戏，更有海量独家正版壁纸，任你挑选。

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

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