一个简单的 flex 布局问题

<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 的垂直方向位置一致

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 谢谢

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/442805

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.