那如果在让这两个标签用flex布局进行自定义呢

如果你想使用Flex布局来自定义input标签和标签的样式和位置，可以将们放在一个父容器中，并使用Flex属性来控制它们的布局以下是一个示例```html
<style>
.container {
display:;
align-items:;
}

. {
flex: 1;
margin-right:10px;
}

.custom-span {
: 0;
background-color:;
padding: 5px;
}
</style<div class="container">
<input="text" id="myInput" class="" />
<span class="custom-span">是在input标签后面的文本</span>
</div>

在这个例子中，我们创建了一个名为.container的父容器，设置其display属性为flex，并使用align-items属性来垂直居中容器内的内容。

然后，我们对input标签应用了.input类，使用flex属性将其拉伸为可用空间的一部分，并设置了一个右侧的margin来与span标签分隔开。

接下来，我们对span标签应用了.custom-span类，同样使用flex属性来确定其在容器中的尺寸，并设置背景色和内边距。

你可以根据需要更改类名和样式属性，以满足你的具体需求。

相关问题

使用vue3和js使用flex布局实现div中的两个div水平居中

在Vue.js中使用Flexbox布局让两个`div`水平居中，你可以这样做：

首先，在你的模板（template）中设置包含这两个`div`的父容器的`display`属性为`flex`，并将其`justify-content`设置为`center`，这会使得子元素在主轴（默认为水平方向）上均匀分布并且居中。

<template>
  <div id="parent" class="container">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
  </div>
</template>

然后在CSS部分编写样式：

#parent.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.child1,
.child2 {
  // 其他样式...
}

这里假设`.container`是你自定义的一个类，用于包裹两个子元素。如果`#parent`已经是你的DOM元素，那么直接操作即可。