Question

我是Flexbox和CSS的新手。在这里，我尝试将底部折叠 div对齐到底部和左侧。我试过了align-self: flex-end;，但是它把它放在了右边的底部。我很感激任何帮助/想法将其移至Bottom和Left？

.content {
  flex-direction: column;
  display: flex;
}

.header {
  background: tomato;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.footer {
  background: lightgreen;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.main {
  background: deepskyblue;
  margin: 0.1em;
}

.aside-1 {
  background: gold;
  justify-content: left;
}

.aside-2 {
  background: hotpink;
  justify-content: right;
}

.aside {
  margin: 0.1em;
  display: flex;
  text-align: center;
  font-weight: bold;
  display: flex;
}
.inline-icon {
  vertical-align: bottom;
  font-size: 18px
}

.collapse {
  display: none;
}

@media all and (min-width: 400px) {
  .content {
    flex-direction: row;
    justify-content: left;
  }
  .aside-1 {
    order: 1;
  }

  .aside {
    flex-basis: 10%;
  }
  .main    {
    order: 2;
    flex-basis: 80%;
  }
  .aside-2 {
    order: 3;
  }
  .footer  { order: 4; }

  .collapse {
    align-self: flex-end;
    display: flex;
    white-space: nowrap;
  }

}

body {
  flex-direction: column;
  display: flex;

}

<head>
  <meta charset="utf-8">
  <title>Template</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <header class="header">Header</header>
 <div class="content">
     <article class="main">
       <p><b>Main Content</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </article>
     <aside class="aside aside-1">
       Aside 1
       <div class="collapse">
         <i class="inline-icon material-icons">arrow_back</i> Collapse
       </div>
     </aside>
     <aside class="aside aside-2">Aside 2</aside>
 </div>
 <footer class="footer">Footer</footer>
</body>

修改：请使用400像素的min-width。低于此div正确隐藏。对不起，我之前没有提过这件事。

其他问题：

无论如何都要获得箭头并将折叠文字水平对齐
为什么右边的旁边也是左对齐的。我有justify-content: right;？

Answer 1

您的代码示例中主要需要修复3件事：

您一直在使用left / right justify-content。该值不适用于Flex项目，它们使用flex-start / flex-end。
您希望左侧aside1中的内容垂直堆叠，因此要么向其添加flex-wrap: wrap，要么更好，如下面的示例所示，将弹性方向更改为{{1 }}
对于flex column项，没有 justify-self 属性执行column对行项的操作，因此推送align-self在底部，将需要自动保证金。

上述内容还解决了两个额外问题中的第二个，首先，将collapse添加到align-items: center会使箭头/文本垂直居中。

作为旁注，以下是关于如何使用Flexbox的更好阅读方法之一：A guide to Flexbox

Stack snippet

collapse

.content {
  flex-direction: column;
  display: flex;
}

.header {
  background: tomato;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.footer {
  background: lightgreen;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.main {
  background: deepskyblue;
  margin: 0.1em;
}

.aside-1 {
  flex-direction: column;         /*  added  */
  background: gold;
  justify-content: flex-start;    /*  should be "flex-start" (not "left")  */
}

.aside-2 {
  background: hotpink;
  justify-content: flex-end;      /*  should be "flex-end" (not "right")  */
}

.aside {
  margin: 0.1em;
  display: flex;
  /*text-align: center;*/
  font-weight: bold;
}
.inline-icon {
  vertical-align: bottom;
  font-size: 18px
}

.collapse {
  display: none;
}

@media all and (min-width: 400px) {
  .content {
    flex-direction: row;
    justify-content: flex-start;  /*  should be "flex-start" (not "left")  */
  }
  .aside-1 {
    order: 1;
  }

  .aside {
    flex-basis: 10%;
  }
  .main    {
    order: 2;
    flex-basis: 80%;
  }
  .aside-2 {
    order: 3;
  }
  .footer  { order: 4; }

  .collapse {
    /*align-self: flex-end;           control left/right for column direction  */
    margin-top: auto;             /*  added, push to bottom  */
    display: flex;
    align-items:center;           /*  added, vertically center items  */
    white-space: nowrap;
  }

}

body {
  flex-direction: column;
  display: flex;

}

在此示例中，我清理了一些属性，并使用媒体查询右/左切换<head> <meta charset="utf-8"> <title>Template</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <header class="header">Header</header> <div class="content"> <article class="main"> <p><b>Main Content</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <aside class="aside aside-1"> Aside 1 <div class="collapse"> <i class="inline-icon material-icons">arrow_back</i> Collapse </div> </aside> <aside class="aside aside-2">Aside 2</aside> </div> <footer class="footer">Footer</footer> </body>。

Stack snippet

aside2

.content {
  flex-direction: column;
  display: flex;
}

.header {
  background: tomato;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.footer {
  background: lightgreen;
  flex: 1 100%;
  font-weight: bold;
  text-align: center;
  margin: 0.1em;
}

.main {
  background: deepskyblue;
  margin: 0.1em;
}

.aside-1 {
  flex-direction: column;         /*  added  */
  background: gold;
  /*justify-content: flex-start;      default, not needed  */    }

.aside-2 {
  background: hotpink;
  /*justify-content: flex-start;      default, not needed  */    }

.aside {
  margin: 0.1em;
  display: flex;
  /*text-align: center;*/
  font-weight: bold;
}
.inline-icon {
  vertical-align: bottom;
  font-size: 18px
}

.collapse {
  display: none;
}

@media all and (min-width: 400px) {
  .content {
    flex-direction: row;
    /*justify-content: flex-start;      default, not needed  */
  }
  .aside-1 {
    order: 1;
  }

  .aside {
    flex-basis: 10%;
  }
  .main    {
    order: 2;
    flex-basis: 80%;
  }
  .aside-2 {
    order: 3;
    justify-content: flex-end;    /*  added  */
  }
  .footer  { order: 4; }

  .collapse {
    /*align-self: flex-end;           as this control left/right for
                                      "column" direction, I removed it  */
    margin-top: auto;             /*  added, push to bottom  */
    display: flex;
    align-items:center;           /*  added, vertically center items  */
    white-space: nowrap;
  }

}

body {
  flex-direction: column;
  display: flex;

}

将flex-end元素与其容器的底部和左侧对齐

1 个答案: