html - Flex Boxes 左对齐效果

问题描述

我想要实现一个始终位于页面底部的页脚。我正在使用弹性框来获得这种效果的基础知识，但我似乎无法按照我想要的方式对齐元素。我会感谢任何帮助。

我仍然是一名学生，并且比设计更擅长网络开发。但是，如果我想去任何地方，都必须掌握。我正在做这个项目作为投资组合的一部分和实践。

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background-color: black;
}

<html>

<head></head>

<body>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis massa justo, eget elementum orci efficitur sit amet. Sed eget iaculis odio. Aenean aliquet elit tellus, id luctus ex efficitur in. Quisque eu eros dui. Sed a arcu in leo hendrerit
    convallis vel sit amet purus. Aenean ac libero non nisl dapibus faucibus vel id elit. Suspendisse sed dictum erat, non posuere risus. Nulla fermentum, neque a vehicula sodales, massa arcu sagittis nunc, vel euismod lorem libero a elit. In auctor vehicula
    porta. Morbi vitae tristique enim. Phasellus at elit scelerisque, dignissim odio vitae, fermentum tellus. Maecenas pretium mollis metus non hendrerit. Ut mollis elementum lorem et semper. Nam ornare, mauris id maximus semper, mi lorem interdum risus,
    mollis rutrum ex mi pharetra tellus. Ut vitae mattis lacus, vitae scelerisque enim. Maecenas dictum quis nisl vitae condimentum. Pellentesque pulvinar sem nec risus dignissim, sed egestas libero mollis. Maecenas iaculis suscipit justo, vel rutrum
    leo auctor in. Integer condimentum purus in placerat viverra. Ut euismod enim ut erat aliquet feugiat ac vel ante. Pellentesque mollis diam lacinia augue maximus, iaculis congue nisl dapibus. Integer consectetur nibh sapien. Cras at risus lorem. Suspendisse
    venenatis eleifend erat quis fringilla. Aliquam gravida lacus et leo tempor porttitor. Aliquam placerat felis laoreet condimentum viverra. Nulla at bibendum est. Nunc mattis pharetra nunc vitae interdum. Maecenas suscipit molestie vehicula. Nulla
    sed diam pretium, lacinia leo tincidunt, porttitor nulla. Ut nec massa imperdiet, maximus turpis vel, posuere nisi. Mauris ut purus purus. Mauris rhoncus diam sit amet imperdiet volutpat. Cras vitae risus sem. Aenean sed mi eget lorem laoreet pretium
    sit amet non turpis. Nulla vel maximus tortor. Nunc auctor diam laoreet pulvinar posuere. Mauris nec lectus eget massa tincidunt tempus. Etiam viverra justo diam, a vulputate lectus efficitur et. Suspendisse tellus justo, bibendum at vehicula id,
    bibendum id nisl. Donec dictum ex ac orci accumsan sollicitudin. Phasellus aliquet lorem non egestas facilisis. Ut vehicula et augue vitae tempus. Integer pellentesque sed nulla in pharetra. In scelerisque ex vel ipsum congue posuere. Donec accumsan
    finibus eleifend. Donec leo ipsum, placerat id faucibus ut, commodo eget purus. Sed tellus massa, vehicula in sem at, bibendum tristique sem. Mauris vulputate ligula at tortor vestibulum consectetur. Cras ultricies tortor lorem, id congue arcu pretium
    eget. In velit erat, luctus a neque et, placerat elementum nunc. Nulla a mauris tempus, blandit ante at, condimentum libero.
  </div>
  <footer class="footer">
    <!-- Footer Links -->
    <div class="container text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Very long link 1</a>
            </li>
            <li>
              <a href="#!">Very long link 2</a>
            </li>
            <li>
              <a href="#!">Very long link 3</a>
            </li>
            <li>
              <a href="#!">Very long link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
</body>

</html>

我所期望的是页脚会粘在页面底部。它会这样做，但 .footer 部分仍以列格式布局。我知道这是因为它的父级设置为此。但是考虑到我正在使用弹性盒子，我不确定如何让它做我想做的事。

标签： htmlcss

解决方案

Flexbox 规则不会被继承，它们只会影响容器本身，并且只有它的直接后代成为弹性项目。您看到的堆叠是因为您的div容器和hr元素是块元素，默认情况下采用全宽。

添加引导程序后，您的标记很好，并且可以正常工作（全屏）。您可以参考文档或源代码以获取更多详细信息，但作为大纲，以防万一您想在没有引导程序的情况下推出自己的版本：

row创建一个弹性容器。相当于display: flex;。
col-x在 12 中创建一个 x 宽的列。对于您的情况，col-3相当于width: 25%;（或flex-basis: 25%;保持 flexbox 样式）
-md-,-xs-仅适用于特定断点。

只需添加几条规则即可解决您的问题。请注意，.row设置display: flex;但没有flex-direction并且仍然在行中流动。如果你删除它display，链接仍然堆叠在列中，因为hr元素是100%宽度并且div元素没有浮动。

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background-color: black;
}

.col-md-3 {
  width: 25%;
}

.row {
  display: flex;
}

<html>


<head>
</head>

<body>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis massa justo, eget elementum orci efficitur sit amet. Sed eget iaculis odio. Aenean aliquet elit tellus, id luctus ex efficitur in. Quisque eu eros dui. Sed a arcu in leo hendrerit
    convallis vel sit amet purus. Aenean ac libero non nisl dapibus faucibus vel id elit. Suspendisse sed dictum erat, non posuere risus. Nulla fermentum, neque a vehicula sodales, massa arcu sagittis nunc, vel euismod lorem libero a elit. In auctor vehicula
    porta. Morbi vitae tristique enim. Phasellus at elit scelerisque, dignissim odio vitae, fermentum tellus. Maecenas pretium mollis metus non hendrerit. Ut mollis elementum lorem et semper. Nam ornare, mauris id maximus semper, mi lorem interdum risus,
    mollis rutrum ex mi pharetra tellus. Ut vitae mattis lacus, vitae scelerisque enim. Maecenas dictum quis nisl vitae condimentum. Pellentesque pulvinar sem nec risus dignissim, sed egestas libero mollis. Maecenas iaculis suscipit justo, vel rutrum
    leo auctor in. Integer condimentum purus in placerat viverra. Ut euismod enim ut erat aliquet feugiat ac vel ante. Pellentesque mollis diam lacinia augue maximus, iaculis congue nisl dapibus. Integer consectetur nibh sapien. Cras at risus lorem. Suspendisse
    venenatis eleifend erat quis fringilla. Aliquam gravida lacus et leo tempor porttitor. Aliquam placerat felis laoreet condimentum viverra. Nulla at bibendum est. Nunc mattis pharetra nunc vitae interdum. Maecenas suscipit molestie vehicula. Nulla
    sed diam pretium, lacinia leo tincidunt, porttitor nulla. Ut nec massa imperdiet, maximus turpis vel, posuere nisi. Mauris ut purus purus. Mauris rhoncus diam sit amet imperdiet volutpat. Cras vitae risus sem. Aenean sed mi eget lorem laoreet pretium
    sit amet non turpis. Nulla vel maximus tortor. Nunc auctor diam laoreet pulvinar posuere. Mauris nec lectus eget massa tincidunt tempus. Etiam viverra justo diam, a vulputate lectus efficitur et. Suspendisse tellus justo, bibendum at vehicula id,
    bibendum id nisl. Donec dictum ex ac orci accumsan sollicitudin. Phasellus aliquet lorem non egestas facilisis. Ut vehicula et augue vitae tempus. Integer pellentesque sed nulla in pharetra. In scelerisque ex vel ipsum congue posuere. Donec accumsan
    finibus eleifend. Donec leo ipsum, placerat id faucibus ut, commodo eget purus. Sed tellus massa, vehicula in sem at, bibendum tristique sem. Mauris vulputate ligula at tortor vestibulum consectetur. Cras ultricies tortor lorem, id congue arcu pretium
    eget. In velit erat, luctus a neque et, placerat elementum nunc. Nulla a mauris tempus, blandit ante at, condimentum libero.
  </div>
  <footer class="footer">
    <!-- Footer Links -->
    <div class="container text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Very long link 1</a>
            </li>
            <li>
              <a href="#!">Very long link 2</a>
            </li>
            <li>
              <a href="#!">Very long link 3</a>
            </li>
            <li>
              <a href="#!">Very long link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none">

        <!-- Grid column -->
        <div class="col-md-3 mx-auto">

          <!-- Links -->
          <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
</body>

</html>

html - Flex Boxes 左对齐效果

问题描述

解决方案

推荐阅读