减小荧屏时如何将flex子元素放在开头？-编程知识-白鹭情

制作导航栏。

在大荧屏上，一切看起来都是我需要的。

小荧屏的问题。

当荧屏缩小时，Flex 子项应该紧贴左边缘。但这不会发生。他们居中。

这是它在我的荧屏上的样子：

减小荧屏时如何将flex子元素放在开头？

我需要它看起来像这样：

减小荧屏时如何将flex子元素放在开头？

不能使用媒体请求和其他用途。任务条件：仅弯曲，仅此而已。

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

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

a {
    text-decoration: none;
}

.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 {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.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">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

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

uj5u.com热心网友回复：

我认为如果您不允许使用媒体查询，您将获得的最接近的是使用空格而不是空格。

不同之处在于自由空间仅分布在元素之间，不包括左右极端：

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

a {
    text-decoration: none;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    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 {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.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">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

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

uj5u.com热心网友回复：

我要解决这个问题的方法是：

先用手机试试。这意味着您将 css 放在移动设备上，然后在移动样式之上添加桌面。如果您对此不确定，请查看 CSS 中的媒体查询 ( https://www.w3schools.com/css/css3_mediaqueries.asp )
默认显示：flex；将包装内容（如果超出限制，它将进入新行）并将使用行作为默认方向
如果您洗掉 justify-content: space-around 并将其更改为 justify-content: flex-start; 它将全部左对齐（flex-end 将右对齐），因此您可以为此进行媒体查询。

我所做的只是使用媒体查询添加了一个桌面/平板计算机断点并将.footer 的 justify-content 设定为 flex-start

希望这有助于解释更多:)

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

a {
    text-decoration: none;
}

.footer {
    display: flex;
    justify-content: flex-start;
    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 {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.white {
    color: white;
}

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

/* Desktop styling! */
@media screen and (min-width: 480px) {
  .footer { justify-content: space-around; }
}

<!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">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

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