Question

为了学习flexbox，我用我的语言重新制作了Google首页。我做了几次，因为有些事情不是很明显（何时使用display：flexbox）。但现在我撞墙了。如何定位页脚使其位于底部并且斯洛文尼亚在一条线上，两条UL列在同一条线上，但一条在左边，一条在右边？

我将html和身高调整为100％，页脚高度调整为100％。但是当我这样做时，页脚由于某种原因跳了起来。这是为什么？斯洛文尼亚和＆＃34; Google je na voljo v：English＆＃34;被推了上去。

这是我的代码：https://codepen.io/jernejt/pen/KooWwy

这是最终截图：https://imgur.com/bBjMvxS

这是我的标记（CSS不知怎的，我不能在这里粘贴）

＆＃13;

/* Fake Google CSS */

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: Arial, sans-serif;
  font-size: 13px;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  margin: 20px 20px 0 0;
}

header ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: flex-end;
}

header ul li {
  padding-left: 10px;
}

header ul li a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
}

header ul li a:hover {
  text-decoration: underline;
}

#app {
  margin-top: 3px;
}

main {
  display: flex;
  flex-flow: column;
  align-items: center;
}

#google_logo {
  width: 272px;
  height: auto;
  margin: 150px 0 30px 0;
}

form {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  width: 500px;
}

form input {
  width: 100%;
  width: 528px;
  height: 44px;
  padding: 6px 9px 6px 16px;
  border: 1px solid #EAEAEA;
  font-size: large;
  box-shadow: 0 2px 3px #EAEAEA;
  margin-bottom: 40px;
}

button {
  display: flex;
  color: #757575;
  font-size: 13px;
  font-weight: bold;
  background-color: #F2F2F2;
  border: none;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 40px;
}

button:nth-child(2) {
  margin-right: 10px;
}

main p a {
  text-decoration: none;
  color: #1a0dab;
}

main p a:hover {
  text-decoration: underline;
}

footer {
  display: flex;
  flex-flow: wrap;
  height: 100%;
  /*Why does this push Slovenia up?*/
}

footer p {
  display: block;
  width: 100%;
}

footer ul {
  display: flex;
  list-style: none;
  align-self: flex-end;
}

footer #neki1 {}

footer #neki2 {}

＆＃13;

<html>

<head>
  <title>Fake Google</title>

  <link rel="stylesheet" type="text/css" href="google.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>

<body>
  <header>
    <ul>
      <li><a href="#">Gmail</a></li>
      <li><a href="#">Slike</a></li>
      <li><a href="#"><i class="material-icons" id="app">view_module</i></a></li>
      <li>
        <a href="#"><img src="http://via.placeholder.com/32x32" alt="User photo"></a>
      </li>
    </ul>
  </header>

  <main>
    <img id="google_logo" src="http://via.placeholder.com/272x92" alt="Google logo">
    <form>
      <input type="text">
      <button>Iskanje Google</button>
      <button>Klik na srečo</button>
    </form>
    <p>Google je na voljo v: <a href="#">English</a></p>
  </main>

  <footer>
    <p>Slovenija</p>
    <ul id="neki1">
      <li><a href="#">Oglaševanje</a></li>
      <li><a href="#">Posel</a></li>
      <li><a href="#">Predstavitev</a></li>
    </ul>
    <ul id="neki2">
      <li><a href="#">Zasebnost</a></li>
      <li><a href="#">Pogoji</a></li>
      <li><a href="#">Nastavitve</a></li>
      <li><a href="#">Uporabi Google.com</a></li>
    </ul>
  </footer>
</body>

</html>

＆＃13;

Answer 1

height（在flex-direction:column父级） - 或width（在flex-direction:row父级中）的设定值设置flex-basis的初始值。

这意味着可用空间的分配从以下开始：

<header>：35px
<main>：460px
<footer>：100％（父母身高）。

Flexbox从calc(100% + 495px)的初始值开始，并尝试根据100%属性将其缩小回flex-shrink。并且它们中的所有三个都具有默认flex-shrink值，即1（= 可收缩）。

如果您不希望<footer>重叠<main>，请不要让<main>缩小：

main {
  flex-shrink: 0
}

Answer 2

除了Andrei对footer与main重叠的原因的解释之外，如果您希望页脚始终位于底部，请缩小其height并使用{{1} }

margin-top:auto

这是一个小提琴：https://jsfiddle.net/f9e74L3c/1/

两个UL元素和Flexbox

2 个答案: