Fatal编程技术网
  • css/
  • Css 使用flexbox创建页脚

Css 使用flexbox创建页脚

css

Css 使用flexbox创建页脚,css,flexbox,Css,Flexbox,我一直很努力地想做到这一点，但我真的很困惑。我正在尝试创建此站点的页脚，而不使用浮动，使用flex。基本上，我有三套，一套用于导航，一套用于跟踪我们，另一套用于联系。同样，我知道如何使用浮动来实现常规css，挑战在于我的flex，还不够好 非常简单，只需使用displaya:flex和Justify content:Space 以下是代码，供您更好地理解 `<!DOCTYPE html> <html lang="en"> <head> &l

我一直很努力地想做到这一点，但我真的很困惑。我正在尝试创建此站点的页脚，而不使用浮动，使用flex。基本上，我有三套
，一套用于导航，一套用于跟踪我们，另一套用于联系。同样，我知道如何使用浮动来实现常规css，挑战在于我的flex，还不够好

非常简单，只需使用displaya:flex和Justify content:Space 以下是代码，供您更好地理解

`<!DOCTYPE html>
<html lang="en">
<head>
<title>Good Luck</title>
<style>
  footer {
    display: flex;
    justify-content: space-between;
  }
</style>
</head>
 <body>
  <footer>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <ul>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
  <ul>
    <li>H</li>
    <li>I</li>
    <li>J</li>
  </ul>
    </footer>
</body>
</html>'

`
祝你好运
页脚{
显示器：flex；
证明内容：之间的空间；
}

    

  • A
    • 

  • B
    • 

  • C
    • 



    

  • E
    • 

  • F
    • 

  • G
    • 



    

  • H
    • 

  • 我
    • 

  • J
    • 


'
非常简单，只需使用displaya:flex和Justify content:Space-between即可 以下是代码，供您更好地理解

`<!DOCTYPE html>
<html lang="en">
<head>
<title>Good Luck</title>
<style>
  footer {
    display: flex;
    justify-content: space-between;
  }
</style>
</head>
 <body>
  <footer>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <ul>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
  <ul>
    <li>H</li>
    <li>I</li>
    <li>J</li>
  </ul>
    </footer>
</body>
</html>'

`
祝你好运
页脚{
显示器：flex；
证明内容：之间的空间；
}

    

  • A
    • 

  • B
    • 

  • C
    • 



    

  • E
    • 

  • F
    • 

  • G
    • 



    

  • H
    • 

  • 我
    • 

  • J
    • 


'
添加了一个div，以便将每个列表分组到不同的容器中。使
div
s成为唯一的弹性项

<footer> 
  <div>
    <h2 class="footer__headline">Navigation</h2>
    <ul class="footer__list">
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
      <li>nav 4</li>
      <li>nav 5</li>
      <li>nav 6</li>
      <li>nav 7</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Follow Us</h2>
    <ul class="footer__list">
      <li>social 1</li>
      <li>social 2</li>
      <li>social 3</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Contact</h2>
    <ul class="footer__list">
      <li>Adress</li>
      <li>Phone</li>
      <li>Email</li>
      <li>Website</li>
    </ul>
  </div>
</footer>
添加了一个div，以便将每个列表分组到不同的容器中。使
div
s成为唯一的弹性项

<footer> 
  <div>
    <h2 class="footer__headline">Navigation</h2>
    <ul class="footer__list">
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
      <li>nav 4</li>
      <li>nav 5</li>
      <li>nav 6</li>
      <li>nav 7</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Follow Us</h2>
    <ul class="footer__list">
      <li>social 1</li>
      <li>social 2</li>
      <li>social 3</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Contact</h2>
    <ul class="footer__list">
      <li>Adress</li>
      <li>Phone</li>
      <li>Email</li>
      <li>Website</li>
    </ul>
  </div>
</footer>
执行此操作以使响应：

`

`

执行此操作以使响应：

`

`那些
      与页脚有什么关系？如果HTML是使用
        • 完成的，那么页脚就是网站的页脚。如果你指的是
          标签，我不是在说它。这应该不难。顺便问一下，当屏幕太窄时，您希望得到什么输出？那些
            与页脚有什么关系？如果HTML是使用
            • /ul>
              完成的，那么它就是网站的页脚。如果你指的是
              标签，我不是在说它。这应该不难。顺便问一下，当屏幕太窄时，您希望得到什么输出？这个答案部分用于回答问题，但它不是完全响应的-如果用户的设备太窄，无法在最后一列的一行上显示所有内容将被切断。此答案部分用于回答问题，但没有完全响应-如果用户的设备太窄，无法在最后一列的一行上显示所有内容将被切断。这项功能运行良好，只是它没有完全响应-如果用户的设备太窄，无法在一行上显示所有三列，那么它们将被压扁，并且不太可读。添加flex-wrap:wrap；到页脚应该可以解决这个问题。事实上，
              flex wrap
              将有助于安排窄屏幕的内容，但是，这取决于他希望如何在不同的屏幕大小上显示他的信息。同意-并且问题中没有要求响应-这只是flex的另一个方面，让生活更轻松（并给出与上述浮动类似的结果）所以我认为值得一提。@VictorSantizo我的CSS不起作用，因为flex容器中flex项的布局顺序是错误的。谢谢你的帮助。这很好，只是它没有完全响应-如果用户的设备太窄，无法在一行上显示所有三列，那么它们将被压扁，可读性不强在页脚添加flex-wrap:wrap；，应该可以解决这个问题。事实上，
              flex-wrap
              将有助于安排窄屏幕的内容，但是，这取决于他，他希望如何在不同的屏幕大小上显示他的信息。同意-问题中没有要求响应-这只是flex的另一个方面，使lif更简单（并且给出了一个类似于前面提到的浮动的结果），所以我认为值得指出。@VictorAntizo我的CSS不起作用，因为flex容器中flex项的布局顺序是错误的。感谢您的帮助。