Flexbox的新手-我需要做什么?

时间:2018-11-25 13:13:36

标签: css css3 flexbox

该代码具有三个div,这些div在dom中由div-00#排序

我想使用flexbox(宽度> = 460像素)创建以下布局(请查看图片)
enter image description here 添加:18-12-16- enter image description here 有谁能建议如何使用flexbox做到这一点?

选项卡顺序还有第二个问题,但是最好对布局进行排序。

ON MOBILE(例如<460px)-在.div-main中:
所有的div都是父div的100%,顺序为.div-001 -div-002 .div-003。

在桌面上(例如> = 460px)-在.div-main中:
由于高度不同,我不使用浮子,因为这种情况发生在台式机上 Using floats

.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>

2 个答案:

答案 0 :(得分:0)

无法通过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>

答案 1 :(得分:0)

问题在于给.div-main一个flex-direction:列,方法是使.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>