flexbox 的小困难

Question

所以我仍在努力学习有关 flexbox 的一些东西，但我在项目中遇到了一些麻烦。为了便于查看，我把flexbox的代码拿出来了。

我有一个两个 flex 容器，里面有两个 div。它的工作方式很成功，当我将屏幕缩小到足够小时，它们会一个接一个地对齐，而不是像将屏幕放大时那样并排对齐。当您缩小屏幕时，在顶部，在底部。我想要做的是让它在缩小屏幕时位于顶部和底部。

.twoflexcontainer { 
  overflow:hidden;
  width: 100%;
}

.twoflexcontainer div {
   padding: 10px;
}
#twoflexright {
  float:left; 
  width:55%;
}
#twoflexleft { 
  overflow:hidden;

}

@media screen and (max-width: 700px) {
   #twoflexright { 
    float: none;
    width:auto;

  }
  .twoflexcontainer { 
  flex-direction: row-reverse;
}
}

<div class="twoflexcontainer">
  <div id="twoflexright"><p>one</p></div>
  <div id="twoflexleft"><p>two</p></div>
</div>

Answer 1

如果我答对了你的问题，这很可能就是你想要实现的目标。（按全尺寸看区别）

.twoflexcontainer {
 overflow: hidden;
 width: 100%;
 display: flex;
 flex-direction: row;
}

.twoflexcontainer div {
 padding: 10px;
 width: 50%;
}

@media screen and (max-width: 1000px) {
 .twoflexcontainer div {
  width: 100%;
 }

 .twoflexcontainer {
  flex-direction: column-reverse;
 }
}

<div class="twoflexcontainer">
    <div id="twoflexright"><p>one</p></div>
    <div id="twoflexleft"><p>two</p></div>
</div>

flexbox 的小困难

Small difficulty with a flexbox

html

css

flexbox

responsive

mobile-website