将flexbox网格转换为以不同顺序堆叠

塔赫尔

我需要实现以下响应式布局:

在此处输入图片说明

这是我为台式机设备提供的代码:

.container {
  background-color: red;
  display: flex;
}

.sidebar-wrapper {
  @media only screen and (min-width: 600px) {
    width: 264px;
    padding-right: 30px;
  }
}

.sidebar-header {
  padding: 20px;
  background-color: #1CA4FC;
}

.sidebar-footer {
  padding: 20px;
  background-color: #65D643;
}

.site-content {
  padding: 20px;
  background-color: #F7B92B;
  width: calc(100%);
}
<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

如何为上图所示的flexbox排序的移动设备创建流畅的布局?

和克雷格

给定div结构,我会这样做:

.container {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  background-color: #1ca4fc;
}

.sidebar-footer {
  padding: 20px;
  background-color: #65d643;
}

.site-content-mobile {
  padding: 20px;
  background-color: #f7b92b;
}

.site-content {
  display: none;
}

@media (min-width: 787px) {
  .container {
    flex-direction: row;
  }
  .site-content-mobile {
    display: none;
  }
  .site-content {
    display: block;
    width: calc(100%);
    padding: 20px;
    background-color: #f7b92b;
  }
}
<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="site-content-mobile">
      Site Content
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章