Question

我使用flexbox制作了足球记分牌的基本布局。

视图有两个独立的视图：大屏幕和小屏幕。

这是大屏幕布局的样子：

这是小屏幕布局的样子：

我的问题是：在大屏幕布局上，有什么方法让我能够定位corner-a和corner-b，以便它们与{{1}保持一致行，同时在小屏幕上保持布局？

我遇到的这种斗争是，在小屏幕上，感觉我应该将两个carded-players div包装在他们自己的corner包装器中，就像目前的情况一样。在大屏幕上，感觉就像两个div不应该有corners包装器，而只是坐在corners容器的角落里。

解决这个问题的好方法是什么，而不重复HTML？

CSS（从SCSS编译）：

wrap

Codepen链接：http://codepen.io/alanbuchanan/pen/dMgJZg?editors=1100

Answer 1

通过CSS定位和媒体查询的组合，可以实现所需的布局。

首先，你可以摆脱所有这些不必要的代码：

重复的html（桌面版和移动版）

<!-- REMOVE
<div class="corner-a mobile-hide">corner a</div>
<div class="corner-b mobile-hide">corner b</div>
<div class="corners desktop-hide">
     <div class="corner-left">corner-a</div>
     <div class="corner-right">corner-b</div>
</div>
-->

正如您的问题所示，使用重复的HTML不是最佳解决方案。

还删除过时的CSS

/* 
@media (min-width: 601px) {
     .desktop-hide {
          display: none !important;
     }
}
@media (max-width: 600px) {
     .mobile-hide {
          display: none !important;
     }
}
*/

其次，将角落元素添加为.left-col和.right-col的最后一个孩子。

<div class="left-col">
     <div class="top"> ...  </div>
     <div class="bottom"> ...  </div>
     <div class="corner-a">corner a</div><!-- new location -->
</div>

<div class="right-col">
     <div class="top"> ...  </div>
     <div class="bottom"> ...  </div>
     <div class="corner-b">corner b</div><!-- new location -->
</div>

第三，通过使父项为flex容器，使角落能够接受flex属性：

.left-col,
.right-col {
     display: flex;               /* new */
     flex-direction: column;      /* new */
     max-width: 300px;
     width: 80%;
     margin: auto;
}

第四，为较小的屏幕设置角落样式：

@media (max-width: 600px) {

     .corner-a {
          align-self: flex-start;
          position: static;
     }

     .corner-b {
          align-self: flex-end;
          position: static;
     }

}

第五，为更宽的屏幕设置角落样式。

.wrapper {
     border: 1px solid seagreen;
     max-width: 800px;
     display: flex;
     flex-flow: column wrap;
     align-items: center;
     position: relative;    /* new */
}

.corner-a {
     position: absolute;
     left: 0;
     bottom: 0;
  }

.corner-b {
     position: absolute;
     right: 0;
     bottom: 0;
}

注意：

对于较小的屏幕，角落按文档流程定位在布局中。它们与flex属性对齐。
对于更宽的屏幕，角落以绝对定位从文档流中移除。然后将它们放置在它们的容器内（定义为最接近的祖先的元素）。这将是.wrapper。在较小的屏幕上，角落将使用position: static恢复到正常流程。

Revised Codepen

Answer 2

尝试在“.corners”规则中嵌套此代码。

@media(min-width: 680px) {
    position: relative;
    bottom: 1.25em;
}

如果我正确地理解了你的问题，那么当布局转换允许空间时，这会将你的角落a / corner-b元素推到你的梳理玩家行的行。相对位置属性维护文档流中的元素位置，同时允许额外控制而不添加边距/填充。

Answer 3

虽然可能有一个很好的flexbox解决方案（我没有专家），但我认为你可以尝试两个选项，尽管有一个是hackey。

第一个选项是将两个角落div添加到与主要内容相同的父级中。在DOM中，将两个div放在其他内容之后，并在相应的角div上使用float:left/right;。您必须了解如何使用flexbox执行此操作。

另一个，hackey但更简单的解决方案是添加

margin-top:-20px;

到您的.corner类，并在您的媒体查询下添加

margin-top:0px;

请注意，在大屏幕和小屏幕之间转换时，角落确实与主要内容重叠一点，因此您可能希望将0边距属性放在媒体查询下，其中max-width比主查询稍大一些。（这就是为什么这个解决方案是hackey）。

同时将px单位更改为em或vh，无论哪种方式最适合您的应用程序。

将两个div从较小屏幕上的列格式重新定位到更宽屏幕上的单行

3 个答案: