Question

我有这个HTML和CSS。如何将菜单A内容推送到新行？标题下方？

.root {
  display: flex;
}

.content {
  order: 2;
}

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

Answer 1

＆＃13;

.root {
  display: flex;
  display: -webkit-flex; 
  -webkit-flex-wrap: wrap; 
  flex-wrap: wrap;
}

.content {
  order:2;
  width:100%
}

＆＃13;

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>
  <div class="title">Menu B</div>
</div>

＆＃13;

Answer 2

你可以试试这个

＆＃13;

.root {
  display: flex;
  flex-direction: column;  /* Add this */
}

.content {
  order: 2;
}

＆＃13;

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

＆＃13;

或试试这个

＆＃13;

.root {
  display: flex;
  flex-direction: column; /* Add this */
  flex-flow: wrap;  /* Add this */
}

.content {
  order: 2;
  width: 100%;
}

＆＃13;

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

＆＃13;

Answer 3

试试这个：

＆＃13;

.root {
  display: flex;
  flex-wrap: wrap;
}
.root div{
  width: 100%;
}

＆＃13;

<div class="root">
  <div class="title">Menu A</div>
  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>
</div>

＆＃13;

Answer 4

您需要按以下方式调整课程。

.root
  .sub-root
    .title
    .content
  .sub-root
    .title
 and so on....

正在使用Flex。

您的子根将彼此相邻，您的内容将在下一行。

通过正确的方式，我的意思是修复你的HTML。：）

.root {
  display: flex;
}

<div class="root">
  <div class="sub-root">
    <div class="title">Menu A</div>
    <div class="content">Menu A content</div>
  </div>
  <div class="sub-root">
    <div class="title">Menu B</div>
  </div>
</div>

flexbox订单，但从新线开始？

4 个答案: