Question

我的内容布局包含三个部分：标题，内容和页脚。对于小型设备，我想保留此订单，在桌面上我想将页眉和页脚移动到侧边栏。

使用浮动实现：http://codepen.io/anon/pen/jqrZby

标记

<div class="page">
  <div class="top"></div>
  <div class="content"></div>
  <div class="bottom"></div>
</div>

CSS

.page {
  border: 2px solid black;
  padding: 1em;
}

.page:after {
  content: "";
  display: block;
  clear: both;
}

.page > * {
  margin-bottom: 1em;
}

.top {
  border: 2px solid red;
  height: 100px;
}

.content {
  border: 2px solid blue;
  height: 400px;
}

.bottom {
  border: 2px solid green;
  height: 200px;
}

@media screen and (min-width: 800px) {
  .content {
    width: 66%;
    float: left;
  }
  .top, .bottom {
    width: 33%;
    float: right;
  }
}

我正在尝试使用内容和侧边栏之间固定间距的flexbox找到解决方案。如果有可能，有人知道吗？

Answer 1

在不更改结构和使用flexbox的情况下，您需要使用expect { get :index }.to render_template(layout: [])。

首先我们构建它＆＃34; 首先移动＆＃34; 因为它遵循我们已经拥有的div结构的实际顺序。

然后，在适当的媒体查询中，我们需要进行容器包装...通常这将需要一个固定的高度（无论是视口还是px值）...然后我们可以重新排序元素（使用，ahem ，flex-direction:column）并施加我们所需的宽度。

Codepen Demo

＆＃13;

order

＆＃13;

* {
  box-sizing: border-box;
}
.page {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  height: 400px;
  padding: 1em;
}
.top {
  border: 2px solid red;
  height: 100px;
  width: 100%;
  order: 1;
  margin-bottom: 1em;
}
.content {
  border: 2px solid blue;
  height: 400px;
  order: 2;
}
.bottom {
  border: 2px solid green;
  height: 200px;
  order: 3;
  margin-top: 1em;
}
@media screen and (max-width: 800px) {
  .page {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top {
    order: 2;
  }
  .top,
  .bottom {
    width: 33%;
  }
  .content {
    order: 1;
    flex: 0 0 100%;
    width: 66%;
    margin-right: 1em;
  }
}

＆＃13;

Flexbox：使用flexbox将页眉和页脚移动到侧栏

1 个答案: