一个简单的 flex 布局问题

This topic created in 3008 days ago, the information mentioned may be changed or developed.

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

Text

view

class

icon

7 replies • 2018-03-30 16:07:32 +08:00

paparika

Mar 30, 2018

paparika

Mar 30, 2018

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

chenno9

Mar 30, 2018

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

Mar 30, 2018

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

rabbbit

Mar 30, 2018

一定要用 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

Mar 30, 2018

结贴

paparika

Mar 30, 2018

@chenno9
@rabbbit 谢谢