为什么在这里将练习主轴元素对齐方式不对呢？

将css中的.text-area的justify-content的center改为flex-start,flex-end,space-between之后，结果都和center一样，为什么呢？

显示的结果

代码

```javascript
<template>
    <view class="content">
        <!-- <view> -->
        <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 >
            I am {{age}} years old.
            <br>
            I have learnt skills such as:{{sss[0]}},{{sss[1]}},{{sss[2]}},{{sss[3]}}
        </view> -->
    </view>
</template>

<script>
    //VM:协调者 调度器
    export default {
        //Model:所有数据
        data() {
            return {
                title: 'Hello 前端',
                // age:18,
                // sss:["Java","Vue","Css","HTML"]
            }
        },
        onLoad() {

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

<style>
    .content {
        display: flex;
        flex-direction:column;
        /* flex-wrap: wrap-reverse; */
        flex-wrap: nowrap;
        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; */
        /* flex-direction:column; */
        justify-content: space-between;
    }

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

换行的不建议用行内元素，直接用view