css - 用于移动设备的 Flexbox 表单没有响应

Question

我希望将#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;
}

Answer 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 , 但如您所见，.message 中没有嵌套任何内容除了 <label>和 <textarea> .

您只需移动 flex-direction:; 即可解决您的问题。和 flex-wrap:;到 .form用于获取结果的容器。

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

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

https://jsfiddle.net/xzq8mvju/