Justify-content: space-between works incorrect

大兔子大兔子 提交于 2021-02-11 16:51:37

问题


i have the following code

header {
  width: 100%;
  height: 65px;
  background: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #252c3a;
}

#menu {
  width: 100%;
  display: flex;
  margin-left: 28%;
}

#menu div {
  width: 100px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
<header>
  <div id="logo">
      <img src="img/header/logo.png" alt="Logo">
  </div>
  <div id="menu">
      <div>Home</div>
      <div>Club-Life</div>
      <div>Training</div>
      <div>Instructors</div>
      <div>Contact</div>
  </div>

Chrome inspect

The width of the other blocks is 100%, but the header width gets bigger than the block below. I use justify-content: space-between.


回答1:


Remove width & margin

Add flex-wrap on the header

header {
    width: 100%;
    height: 65px;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #252c3a;
    flex-wrap:wrap;
}

#menu {
    display: flex;
    flex-wrap:wrap;
}



回答2:


There are few things we need to do:

In header:

1. Remove width

In #main:

1. Remove width
2. Remove margin

In #menu div:

1. Remove everything and just add margin left

Demo: https://codepen.io/Bibeva/pen/povddJr

Final code:

header {
    height: 65px;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #252c3a;
}

#menu {
    display: flex;
}

#menu div {
    margin: 0 0 0 30px;
}



回答3:


#menu {
    display: flex;
}

that's all , Can you try this ?



来源:https://stackoverflow.com/questions/59579406/justify-content-space-between-works-incorrect

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!