那些遇到过的问题

如何使用弹性盒重新排序div？

Mar*_*ick 3 html javascript css css3 flexbox

我试图为我的DOM保持一个seo友好和语义结构,而不重复整个元素以在各种位置显示它们.

我的布局基于display: flex项目.我尝试实现以下目标:

预览移动和桌面布局

重要的事情要知道:

  • 我不想根据窗口宽度显示/隐藏div(以避免不必要的重复)
  • 没有div具有已知或固定的高度
  • 在桌面上,div应该是垂直居中的,而右列是构建一个标记团队(表现得像一个单独的div)
  • 布局需要至少支持IE11 +

是否只有css解决方案来实现这一目标？

如果没有,可以很容易地删除绿色div并使用javascript将其内容粘贴到粉红色的内容中.但我确实对使用它的性能和"闪烁"感到担忧,尽管调整浏览器大小使其变得更加复杂.我是否让这种不必要的复杂化？

这里是小提琴显示一个工作的解决方案,但使用javascript:

CODEPEN DEMO

LGS*_*Son 6

通常,您不能单独使用Flexbox执行此操作,但可能会根据每个给定的案例进行折衷​​.

使用Flexbox,使用固定高度,您可以实现此目的

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);  
  display: flex;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}
.flex::before {
  content: '';
  height: 100%;
}

@media (max-width:768px) {
  .flex div {
    width: auto;
  }
  .flex::before {
    display: none;
  }
 .flex div:nth-child(2) {
    order: 0;
  }
}


/*  styling  */
.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex">
  <div class="flex-child">
    <div>Top/Right</div>
  </div>
  <div class="flex-child">
    <div>Center/Left</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这种情况下,如果不允许固定高度,您可以组合Flexbox和float.

通过使用Flexbox将其设置为移动设备,您可以在标记中首先添加中心项目,然后order在顶部和底部之间移动它.

随着媒体查询你再简单地使柔性容器块元素,并使用float以定位左到左和右的权利.

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  max-width: 1024px;
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
  padding: 5%;
  flex-basis: 33.333%;

  display: flex;
  align-items: center;
}

.flex-child:nth-child(1) {
  background: #e6007e;
  order: 1;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
  order: 2;
}

@media (min-width: 768px) {
  .flex {
    display: block;
  }
  .flex-child {
    width: 50%;
  }
  .flex-child:nth-child(1) {
    float: left;
    height: 100%;
  }
  .flex-child:nth-child(2),
  .flex-child:nth-child(3) {
    float: right;
    height: 50%;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex">
  <div class="flex-child">
    <div>Center/Left</div>
  </div>
  <div class="flex-child">
    <div>Top/Right</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

更新

这是另一个结合了Flexbox的版本position: absolute,它也在桌面模式下垂直居中

更新后,添加了一个脚本来控制所以绝对定位的元素不会比正确的项目大,如果是这样,调整flex容器的高度.

注意,脚本绝不是优化的,它仅用于显示在某些情况下如何修复

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var fp = document.querySelector('.flex');
  var fi = fp.querySelector('.flex-child:nth-child(1)');
  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
     
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    if (fp.offsetHeight <= fi.offsetHeight) {
      fp.style.cssText = 'height: '+fi.offsetHeight+'px';
    } else {
      fp.style.cssText = 'height: auto';
    }
  }

  window.addEventListener('load', function() {
    actualResizeHandler();
  })
  
}());
Run Code Online (Sandbox Code Playgroud) 
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  position: relative;
  max-width: 1024px;
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
  padding: 5%;
}

.flex-child:nth-child(1) {
  order: 1;
}
.flex-child:nth-child(3) {
  order: 2;
}

.flex-child:nth-child(1) div {
  background: #e6007e;
}
.flex-child:nth-child(2) div {
  background: #f4997c;
}
.flex-child:nth-child(3) div {
  background: #86c06b;
}

@media (min-width: 768px) {
  .flex {
    justify-content: center;
  }
  .flex-child {
    width: 50%;
  }
  .flex-child:nth-child(1) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .flex-child:nth-child(n+2) {
    margin-left: 50%;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex">
  <div class="flex-child">
    <div>Center/Left<br>with more<br>content<br>than any<br>of the<br>other items<br>other items<br>other items<br>other items<br>other items</div>
  </div>
  <div class="flex-child">
    <div>Top/Right<br>with more<br>content</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right<br>with more</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

使用脚本,还可以在元素之间重新排序/移动项目.

堆栈代码段

您还可以将其与媒体查询结合使用,并使用它来执行元素的实际重新排序

$( document ).ready(function() {
  $(window).resize(function() {
    if ($( window ).width() < 600 ) {
      $(".one").insertBefore("#b");
    } else {
      $(".one").insertBefore(".two");
    }
  });
});
Run Code Online (Sandbox Code Playgroud) 
.outer, #flex, #flex2 {
  display: flex;
  flex-direction: column;
}
#a {
  order: 4;
  background: #ccc;
}
#b {
  order: 1;
  background: #aaa;
}
#c {
  order: 3;
  background: #d33;
}
.one {
  order: 2;
  background: #aaa;
}
.two {
  order: 5;
  background: #aaa;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  <div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
  </div>

  <div id="flex2">
    <div class="one">Show me 2nd</div>
    <div class="two">Show me 5th</div>
  </div>

</div>
Run Code Online (Sandbox Code Playgroud)

更新2(在另一个问题回答,但后来移到这里)

如果我们谈论较小的项目,如标题或较小的菜单,可以做许多网站平台提供商,如"squarespace","weebly","wordpress"等.他们的模板包含不同的标记结构,其中一个项目有时存在两次,一个可用于桌面,另一个用于移动.

此外,如此小,在性能方面会有更少甚至没有(并且我个人认为这不再是问题,而是有重复的CSS规则,每个屏幕大小一个,并且很乐意这样做而不是引入脚本) .

小提琴演示

堆栈代码段

.container {
  display: flex;
}
.container > div {
  width: 50%;
}
.container div:nth-child(-n+2) {
  border: dashed;
  padding: 10px;
}
.container > div:nth-child(1) {
  display: none;                                  /*  hide outer "Flower"  */
}

@media (max-width:768px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: auto;
  }
 .container div:nth-child(1) {
    display: block;                               /*  show outer "Flower"  */
  }
  .container div:nth-child(3) div:nth-child(1) {
    display: none;                                /*  hide inner "Flower"  */
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div>Flower</div>
  <div>Tree</div>
  <div>
    <div>Flower</div>
    <div>Bee</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

747 次

最近记录：

8 年，4 月 前
相关归档
从右向左滑动？ 382
在javascript中捕获ctrl + z组合键 65
中心文本垂直位于<DIV>中 51
语法高亮显示sublime中的反应代码 50
Google Analytics异步设计模式的名称是什么？它在哪里使用？ 47
如何在不使内容(图像和文本)透明的情况下使我的网站背景透明？ 22
CSS - 使用绝对位置时链接无法点击 21
未定义textpath上href的SVG名称空间前缀xlink 17
css3 border-image的透明png问题 2
单击Firefox时,纯CSS明星评级小部件专注于顶部 2
难疑归档
如何判断Bash中是否存在常规文件？ 3069
__str__和__repr__之间的区别？ 2545
抽象函数和虚函数有什么区别？ 1526
如何检查字符串是否为数字(浮点数)？ 1519
如何设置HTML <select>元素的默认值？ 1343
如何为项目中的单个文件禁用ARC？ 1332
Git push需要用户名和密码 1327
显示屏上的转换:属性 1322
在现代Python中声明自定义异常的正确方法？ 1176
如何按值排序多维数组？ 1058