主页 / 问题 / 1104424
Accepted
JustLearn
Asked:2020-04-02 20:34:26 +0000 UTC2020-04-02 20:34:26 +0000 UTC

为什么 justify-content 属性不适用于弹性项目？

  • 772

对于 .content-line ， justify-content 属性由于某种原因不起作用。这个属性甚至在检查器中被划掉了。

问题：为什么这个属性不起作用？如何解决？

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

html,
body {
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  background: #303f62;
  height: 150px;
}

ul {
  display: flex;
  padding: 0;
  height: 125px;
  flex-wrap: wrap;
  padding: 10px;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
  margin-right: auto;
}

.right {
  margin-top: 15px;
  margin-left: auto;
  margin-right: 10%;
}

ul>a {
  margin-right: 5px;
  width: 150px;
  border: 1px solid transparent;
  text-align: center;
  color: #fff;
  background: #1e625b
}

ul>a:hover {
  background: #29857d;
  cursor: pointer;
}

.wrapper {
  display: flex;
}

.sidebar {
  display: flex;
  flex-grow: 0;
  justify-content: center;
  align-items: flex-start;
  width: 20%;
  height: 600px;
  min-width: 200px;
  background: #303f62;
}

.sidebar .links {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.links>a {
  margin-bottom: 20px;
  text-decoration: none;
  color: #fff;
}

.links>a:hover {
  color: #00856b;
}

.content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-start;
  background: rgba(41, 41, 41, 0.3);
  height: 600px;
}

.content-line {
  display: flex;
  width: 200px;
  height: 200px;
  background: yellow;
}


/*Media Queries*/

@media all and (max-width: 920px) {
  ul {
    flex-direction: column;
  }
  ul a {
    margin-right: 0;
    margin-bottom: 5px;
  }
}
<body>
  <nav>
    <div class="left">
      <img src="logo1.jpg" alt="Лого">
    </div>
    <div class="right">
      <ul>
        <a>Главная</a>
        <a>О нас</a>
        <a>Контакты</a>
        <a>Сотрудники</a>
      </ul>
    </div>
  </nav>
  <div class="wrapper">
    <div class="sidebar">
      <div class="links">
        <a href="#">Статьи</a>
        <a href="#">Домой</a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>


    <div class="content">
      <div class="content-line">

      </div>
    </div>
  </div>
</body>

html

1 个回答

  1. Best Answer

    在这个问题中，您似乎不想说关于 class .content-line，而是关于.content，你有这个 CSS ：

    .content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-start;
  background: rgba(41, 41, 41, 0.3);
  height: 600px;
}

    第justify-content一个被覆盖了，如果你去掉这个属性的重新声明，那么一切都会正常

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

html,
body {
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  background: #303f62;
  height: 150px;
}

ul {
  display: flex;
  padding: 0;
  height: 125px;
  flex-wrap: wrap;
  padding: 10px;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
  margin-right: auto;
}

.right {
  margin-top: 15px;
  margin-left: auto;
  margin-right: 10%;
}

ul>a {
  margin-right: 5px;
  width: 150px;
  border: 1px solid transparent;
  text-align: center;
  color: #fff;
  background: #1e625b
}

ul>a:hover {
  background: #29857d;
  cursor: pointer;
}

.wrapper {
  display: flex;
}

.sidebar {
  display: flex;
  flex-grow: 0;
  justify-content: center;
  align-items: flex-start;
  width: 20%;
  height: 600px;
  min-width: 200px;
  background: #303f62;
}

.sidebar .links {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.links>a {
  margin-bottom: 20px;
  text-decoration: none;
  color: #fff;
}

.links>a:hover {
  color: #00856b;
}

.content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  background: rgba(41, 41, 41, 0.3);
  height: 600px;
}

.content-line {
  display: flex;
  width: 200px;
  height: 200px;
  background: yellow;
  justify-content: center;
}


/*Media Queries*/

@media all and (max-width: 920px) {
  ul {
    flex-direction: column;
  }
  ul a {
    margin-right: 0;
    margin-bottom: 5px;
  }
}
    <nav>
  <div class="left">
    <img src="https://picsum.photos/200/200" alt="Лого">
  </div>
  <div class="right">
    <ul>
      <a>Главная</a>
      <a>О нас</a>
      <a>Контакты</a>
      <a>Сотрудники</a>
    </ul>
  </div>
</nav>
<div class="wrapper">
  <div class="sidebar">
    <div class="links">
      <a href="#">Статьи</a>
      <a href="#">Домой</a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>


  <div class="content">
    <div class="content-line">
      Здесь контент
    </div>
  </div>
</div>

    • 0

相关问题