为什么这两行会在一行？

在HBuilderX里面实现双向绑定，可是不知道为什么框出的两行是在一行？不是应该灰色的在黑色的上面吗?为嘛会到一行去呢？

显示结果

代码：

```javascript
<template>
 <view class="content">
  <image class="logo" src="/static/logo.png"></image>
  <view class="text-area">
   <text class="title">{{title}}</text>
   <input type="text" :value="title" @input="change" />
  </view>
 </view>
</template>

<script>
 //VM:协调者 调度器
 export default {
  //Model:所有数据
  data() {
   return {
    title: 'Hello 前端'
   }
  },
  onLoad() {

  },
  methods: {
   change(e)
   {
    var txttitle=e.detail.value;
    this.title=txttitle;
    // debugger;
   }
  }
 }
</script>

<style>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }

 .logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
 }

 .text-area {
  display: flex;
  justify-content: center;
 }

 .title {
  font-size: 36rpx;
  color: #8f8f94;
 }
</style>

uniapp默认文本都会在一行，你可以外层加个view

两个原因，
1是text和input的display都是行内块，并非像view那样的占整行。要他们上下排，在他们外层加了view。加完后，你会发现还是在一行……原因看第2
2你用了flex布局，他们就会在一行显示，你要他们居中，其实用margin:10px auto;即可。当然所执意要用flex，那么还需要设置flex-direction:column

input跟text都是行内元素，跟span一样，如果要换行可以用view

首先文字改view标签、输入框外层套一个view，其次你给text-area 设置display:flex 了，里面默认的view就会横向展示，再把这个display:flex去掉就可以 。或者再追加一行 flex-direction:column ,这样变成竖向的布局也可以。