移动版 Flexbox 表单没有响应答案

【问题标题】：Flexbox Form for Mobile not responding移动版 Flexbox 表单没有响应
【发布时间】：2019-08-07 19:32:30
【问题描述】：

我想让#ClickWordList li 项目位于消息框下方。我已经尝试了几乎所有东西，但布局并没有改变。我上网查了一下，找到了0个解决方案。任何建议都受到高度欢迎。

HTML：

<h3 class="title">What new feature or section would you add?</h3>
<h3 class="message-box">Message Box</h3>

<div id="message-box-container">
    <div class="form">
        <div class="message">
            <label for="txtMessage"></label>
            <textarea id="txtMessage" name="txtMessage" class="txtDropTarget ui-droppable"></textarea>
        </div>

        <div class="clickable-questions">
            <ul id="ClickWordList">
                <li id="click1"></li>
                <li id="click2"></li>
                <li id="click3"></li>
            </ul>
        </div>
    </div>
</div><!--message-box-container-->

CSS：

/*********** free form message styles ******/

.form{
    display: flex;
}
.message {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    order: 1;
}

.message > textarea {
    flex: 1;
    min-width: 18rem;
    max-height: 12rem;
    font-size: 12px;
    padding: 10px;
    outline: none;
}

.clickable-questions {
    flex: 1;
    order: 2;
    margin-right: 2rem;
}

#ClickWordList > li {
    cursor: pointer;
    padding-bottom: 13px;
    line-height: 1.5;
    font-size: 14px;
}

【问题讨论】：

标签： css forms flexbox

【解决方案1】：

问题在于你把flex-direction放在哪里

您将它放在.message 中，读取标记的方式使.message 在下一个</div> 标记处结束。

<div class="form">
    <div class="message"><--!this is start of message container!-->
      <label for="txtMessage"></label>
      <textarea id="txtMessage" name="txtMessage" class="txtDropTarget ui-droppable"></textarea>
    </div><--!this is end of message container!-->

您使用 css 将 flex-direction 设置为 .message ，但是您可以看到除了 <label> 和 <textarea> 之外，.message 内没有嵌套任何内容。

您只需将flex-direction:; 和flex-wrap:; 移至.form 容器即可解决问题。

.form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

请务必验证您的容器是如何嵌套的。这将在您解决问题时节省您的时间。

https://jsfiddle.net/xzq8mvju/

【讨论】：