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

标签 css flexbox

总的来说，我是 Flexbox 和 CSS 的新手。在这里，我试图将底部的 Collapse div 与底部和左侧对齐。我已经尝试过 align-self: flex-end;，但它会把它放在底部的右边。如果有任何帮助/想法将其移至底部和左侧，我将不胜感激？

.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 已正确隐藏。很抱歉我之前没有提到这个。

其他问题:

  • 有没有办法让箭头和折叠文本水平对齐
  • 为什么右边的 aside 也是左对齐的。我有 证明内容: 对；?

最佳答案

您的代码示例中主要有 3 处需要修复:

  1. 您一直在为 justify-content 使用 left/right。该值不适用于 flex 元素，它们使用 flex-start/flex-end。

  2. 您希望左侧 aside1 中的内容垂直堆叠，因此可以向其添加 flex-wrap: wrap，或者更好，如下所示示例，将 flex 方向更改为 column

  3. 对于 flex column 元素，没有 justify-self 属性可以为行元素执行 align-self 的操作，所以要将 collapse 推到底部，将需要自动边距。

上面也解决了两个额外问题中的第二个，对于第一个，将 align-items: center 添加到 collapse 将使箭头/文本垂直居中。

作为旁注，这里是如何使用 Flexbox 的最佳读物之一:A guide to Flexbox

堆栈片段

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

在这个示例中，我清理了一些属性并使 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;

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

关于css - 将 flex-end 元素与其容器的底部和左侧对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49158068/

上一篇：html - 列表项之间不可点击的边框

下一篇：css - 如何确保 1px 边框始终显示，无论用户在 chrome(或任何浏览器)中放大多少？

相关文章：

javascript - Youtube API - 使用 "this"播放当前视频

html - 显示: none - Show on the mobile,但不在桌面上

css - 行内嵌套的 flexbox 列，带有全高子项

html - 将要显示的部分文章与第三个元素居中对齐

css flex-box 嵌套布局有问题

javascript - $(element).width() 与其实际像素宽度之间的奇怪差异

html - 如何在 HTML & CSS 代码中使图片右侧的一组图片向左浮动？

css - 如何区分 mat-select 样式和 mat-paginator mat-select 样式？

html - CSS flex : Vertically centered items that are taller than the viewport

html - 使用 CSS Grid 或 Flexbox 居中环绕固定宽度的列

©2024 IT工具网  联系我们