小编Pau*_*man的帖子

`justify-content`属性不适用于嵌套的flexbox

我是HTML和CSS的新手,我遇到了我正在编码的菜单问题.

我想使用嵌套flexbox制作一个菜单.它接近我想要的但是由于我无法理解的原因,justify-content儿童flexbox内部似乎不适用...

这是我的代码:

header {
  display: inline-flex;
  height: 90px;
  align-items: center;
  justify-content: flex-start;
}
.avatar {
  display: inline-flex;
  height: inherit;
  width: 200px;
  background-color: #00D717;
  align-items: center;
  justify-content: space-around;
}
.avatar h1 {
  font-size: 13px;
  text-transform: uppercase;
  color: white;
}
.resteHeader {
  display: inline-flex;
  height: inherit;
  justify-content: flex-start;
  align-items: center;
}
.resteHeader nav {
  display: inline-flex;
  height: inherit;
  justify-content: space-around;
  align-items: center;
}
.resteHeader nav ul {
  display: inline-flex;
  height: inherit;
  justify-content: space-between;
  align-items: center;
}
Run Code Online (Sandbox Code Playgroud)
<header>
  <div class="avatar"> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

5
推荐指数
2
解决办法
884
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1