主页 / 问题 / 1371153
Accepted
dbUser11
Asked:2022-06-13 22:03:58 +0000 UTC2022-06-13 22:03:58 +0000 UTC

屏幕缩小时如何将flex子元素放在前面？

  • 772

我正在制作导航栏。

在大屏幕上，一切看起来都如我所愿。

小屏问题。

当屏幕缩小时，flex 子元素应该对齐到左边缘。但这不会发生。他们居中。

这是我屏幕上的样子：

在此处输入图像描述

我希望它看起来像这样：

在此处输入图像描述

您不能使用媒体查询或类似的东西。问题的条件：只有弯曲，没有别的。

那么如何才能得到和图片一样的效果呢？

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    background: black;
    font-weight: bold;
    padding: 8px 8px;
}

.footer-name {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.footer-nav-item {
    padding-left: 10px;
}

.footer-nav-item {
    text-decoration: none;
}

.footer-button {
    font-size: 8px;
    background: inherit;
    border: 1px solid white;
    padding: 4px 4px;
}

.white {
    color: white;
}

.footer-margin {
    margin: 8px 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/styles.css">
    <title>Flex navigation</title>
</head>
<body>
    <footer class="footer">
        <p class="footer-name footer-margin white">Rio Coffee</p>

        <nav class="footer-nav footer-margin">
            <a class="footer-nav-item white" href="#">HOME</a>
            <a class="footer-nav-item white" href="#">ABOUT</a>
            <a class="footer-nav-item white" href="#">SERVICES</a>
            <a class="footer-nav-item white" href="#">MENU</a>
        </nav>
        
        <button class="footer-button footer-margin white">CONTACT</button>
    </footer>
</body>
</html>

css

2 个回答

  1. Best Answer

    一般来说，事实上，如果你设置它会在左边上升space-between。但是，这仍然不是在较小版本上设置行为的方法，但它确实有效。而且，当然，最好通过媒体查询来明确指示位置 ( flex-direction: column; align-items: flex-start;) 以避免不必要的问题（例如，现在在某个宽度处，菜单和类似的徽标将悬挂在一个级别，但是联系人按钮将滚动到下一个级别）。

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    background: black;
    font-weight: bold;
    padding: 8px 8px;
}

.footer > * {
  flex-shrink: 0;
}

.footer-name {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.footer-nav-item {
    padding-right: 10px;
}

.footer-nav-item {
    text-decoration: none;
}

.footer-button {
    font-size: 8px;
    background: inherit;
    border: 1px solid white;
    padding: 4px 4px;
}

.white {
    color: white;
}

.footer-margin {
    margin: 8px 8px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/styles.css">
    <title>Flex navigation</title>
</head>
<body>
    <footer class="footer">
        <p class="footer-name footer-margin white">Rio Coffee</p>

        <nav class="footer-nav footer-margin">
            <a class="footer-nav-item white" href="#">HOME</a>
            <a class="footer-nav-item white" href="#">ABOUT</a>
            <a class="footer-nav-item white" href="#">SERVICES</a>
            <a class="footer-nav-item white" href="#">MENU</a>
        </nav>
        
        <button class="footer-button footer-margin white">CONTACT</button>
    </footer>
</body>
</html>

    所以你的老师宁可 nekoreektno 设置任务。

    • 1 

  2. * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: black;
  font-weight: bold;
  padding: 8px 8px;
}

.footer-name {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  display: flex;
}

.footer-nav-item {
  padding-left: 10px;
}

.footer-nav-item {
  text-decoration: none;
}

.footer-button {
  font-size: 8px;
  background: inherit;
  padding: 4px 4px;
}

.white {
  color: white;
}

.footer-margin {
  margin: 8px 8px;
}

@media screen and (max-width: 900px) {
  .footer {
    flex-direction: column;
    align-items: center;
  }
  .footer-name {
    display: flex;
    width: 290px;
    justify-content: flex-start;
     padding-left: 10px;
  }
  .footer-button {
    display: flex;
    width: 290px;
    justify-content: flex-start;
     padding-left: 10px;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/reset.css">
  <link rel="stylesheet" href="./assets/css/reset.css">
  <title>Flex navigation</title>
</head>

<body>
  <footer class="footer">
    <p class="footer-name footer-margin white ">Rio Coffee</p>

    <nav class="footer-nav footer-margin">
      <a class="footer-nav-item white" href="#">HOME</a>
      <a class="footer-nav-item white" href="#">ABOUT</a>
      <a class="footer-nav-item white" href="#">SERVICES</a>
      <a class="footer-nav-item white" href="#">MENU</a>
    </nav>

    <div class="footer-button footer-margin white">
      <button>CONTACT</button>
    </div>
  </footer>
</body>

</html>

    • 0

相关问题