刚接触 Flexbox - 我需要做什么？答案

【问题标题】：New to Flexbox - what do I need to do?刚接触 Flexbox - 我需要做什么？
【发布时间】：2018-12-16 19:32:49
【问题描述】：

代码中有三个div，在dom中按div-00#排序

我想使用 flexbox（宽度 >= 460px）创建的是以下布局（请看图片）
补充：18-12-16 - 有没有人可以建议如何使用 flexbox 做到这一点？

Tab 顺序存在第二个问题，但希望先对布局进行排序。

在移动设备上（例如所有的 div 都是 100% 的父 div，排序为 .div-001 -div-002 .div-003。

在桌面上（例如 >= 460 像素） - 在 .div-main:
由于高度不同，我没有使用浮动，因为这发生在桌面上 .

.div-001 -- 位置：右上角。高度：变化。宽度：20%。理想情况下，标签索引应该是 2（因此我使用 flex 来订购这个 '2'），但要知道顺序是按照 DOM 的顺序读出的。

.div-002 -- 位置：左上角。高度：变化。宽度：80%。理想情况下，标签索引应该是 1（因此我使用 flex 来订购这个 '1'）

.div-003 -- 位置：右侧（.div-003 正下方）。高度：变化。宽度：20%。理想情况下，标签索引应该是 3（因此我使用 flex 来订购这个 '3'）

顺序（以防万一您想知道）很重要。

* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
 a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: column;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    /* example */
    height: 70px;
    order: 2;
  }
  .div-002 {
    /* example (varying height) */
    align-self: flex-start;
    /* smaller than .div-001 */
    height: 50px;
    /* bigger than .div-001 */
    /* height: 360px; */
    order: 1;
  }
  .div-003 {
    /* example */
    height: 20px;
    order: 3;
  }
}

<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

【问题讨论】：

标签： css flexbox

【解决方案1】：

用 flexbox 搞不定，

如果您不受技术限制，这是使用 CSS Grid 的解决方案：

HTML

body {
  margin: 0;
  padding: 0;
}
main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  height: 300px;
  
}

.box {
  border: 5px solid red;
  padding: 50px;
  
  
}

.box.three {
  grid-column: 2;
}

@media (max-width: 460px) {
  main {
    display: flex;
    flex-flow: column;
  }
  .box {
    border-color: black;
 
}

<!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Flexer</title>
        </head>
        <body>
          <main>
            <div class="box one">one</div>
            <div class="box two">two</div>
            <div class="box three">three</div>
          </main>
        </body>
        </html>

【讨论】：

几乎！ div 的高度都可以不同 - .div-001（右上角）可以小于 .div-002（左上角）。您建议的方式意味着（我认为） .div-003 位于 .div-001 和 .div-002 的正下方 - 我也不确定宽度如何与网格一起使用

【解决方案2】：

问题在于给 .div-main 一个 flex-direction: column 通过这样做 .div-desktop-left 和 .div-desktop-right 不会彼此对齐你需要改变的是给 .div -main flex-direction: row 和 flex-wrap: wrap 这将解决问题

* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
 a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    /* example */
    height: 70px;
    order: 2;
  }
  .div-002 {
    /* example */
    align-self: flex-start;
    height: 50px;
    order: 1;
  }
  .div-003 {
    /* example */
    height: 20px;
    order: 3;
  }
}

<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

【讨论】：

嗨 Sara，再次几乎 - .在移动设备上：div-001 是第一，.div-002 是第二个，.div-003 是第三 - 在桌面上：.div-002 是左上角，. div-001 位于右上角，.div-003 位于右侧（位于 .div-001 的正下方）-您的解决方案意味着：div-001 位于左上方，.div-002 位于右上方，.div-003 位于右侧（直接位于.div-001 的下方）。这也可以用浮点数来完成。
嗨，Sara，又差不多 - 问题是如果 .div-002 的高度大于 .div-001 则 .div-003 不会直接位于 .div-001 下方，而是位于下方桌面上 .div-002 的底部我希望右侧的 div 直接位于下方（请参阅更新，第二张图片）
我想不通，但您可以对 div-003 应用负边距顶部来解决此问题，如果不接受，请考虑使用 CSS 网格。