一个简单的 flex 布局问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2241 天前的主题，其中的信息可能已经有所发展或是发生改变。

<view class="wrapper">
<image class="icon" src='../../images/ic.png'></image>
<view class="text">text</view>
</view>

请教如何用 flex 布局实现这样一个布局，text 在 wrapper 内始终水平居中，icon 始终在 text 左边，并与 text 保持固定距离，另外 text 与 icon 的垂直方向位置一致

7 条回复 • 2018-03-30 16:07:32 +08:00

paparika

2018-03-30 12:15:36 +08:00

paparika

2018-03-30 12:16:39 +08:00

上个楼作废，大致这种感觉 |*icon***text********|

chenno9

2018-03-30 15:27:05 +08:00

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrapper{
width: 100%;
display: flex;
background-color: #ccc;
justify-content: center;
}
.icon{
width: 200px;
background-color: red;
margin-right: 50px;
}
.text{
width: 500px;
background-color: yellow;

}
.blank{
width: 250px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="icon">icon</div>
<div class="text">text</div>
<div class="blank"></div>
</div>
</body>
</html>

chenno9

2018-03-30 15:34:29 +08:00

https://gist.github.com/chenno9/e21186dccb21879fa1aee3dbbc75e043

rabbbit

2018-03-30 15:49:31 +08:00

一定要用 flex 吗?
<view class="wrapper">

<view class="text">text</view>
</view>
.wrapper {
display: block;
background: #ff0;
width: 100%;
justify-content: center;
}

.text {
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
border:1px solid black;
position:relative;
}

.text:before {
background: #fff url(../../images/ic.png);
content: "";
display: block;
width: 50px;
height: 50px;
border: 1px solid black;
position: absolute;
left: -100px;
}

paparika

2018-03-30 16:07:05 +08:00

结贴

paparika

2018-03-30 16:07:32 +08:00

@chenno9
@rabbbit 谢谢