文章/答案/技术大牛

发布

社区首页 >问答首页 >不确定如何沿着主轴分别对齐我的flex项目

问不确定如何沿着主轴分别对齐我的flex项目
EN

Stack Overflow用户

提问于 2020-07-16 01:18:21

回答 2查看 78关注 0票数 0

因此，我正在尝试使用flexbox创建一个导航栏，基本上我希望我的标志居中，我的导航栏切换到屏幕的左边。但是，如果我给flex容器设置了justify content属性的值为center，那么它就会将我的logo和导航栏切换器都居中。

我想知道是否有类似于align-self属性的东西，但对于主轴？这样我就可以将我的徽标设置到中间，而将导航栏切换到屏幕的左侧？

下面是我的HTML代码：

<header class="main-navbar">
      <div class="nav-toggler">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="brand">
        <a class="logo-link" href="#">
          <img src="imgs/logo/logo-lightgrey.png" alt="logo-brand-image">
        </a>
      </div>
    </header>

下面是我的css代码：

.main-navbar {
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  font-weight: 500;
}

.nav-toggler {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1rem;
  cursor: pointer;
}

.nav-toggler span {
  width: 1.3rem;
  height: 0.17rem;
  background: white;
  display: block;
}

html

css

flexbox

回答 2

Stack Overflow用户

发布于 2020-07-16 02:06:55

使用自动边距推送两个子元素：

.main-navbar {
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  font-weight: 500;
  background-color: #000;
}

.nav-toggler {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1rem;
  cursor: pointer;
}

.nav-toggler span {
  width: 1.3rem;
  height: 0.17rem;
  background: white;
  display: block;
}

/**/
.nav-toggler,
.brand {
  margin-right: auto;
}

<header class="main-navbar">
      <div class="nav-toggler">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="brand">
        <a class="logo-link" href="#">
          <img src="https://www.placehold.it/100x50" alt="logo-brand-image">
        </a>
      </div>
    </header>

票数 1

Stack Overflow用户

发布于 2020-07-16 15:33:52

我不确定是否有一个纯粹的flex解决方案。您可能需要尝试将position: absolute添加到.nav-toggler中。这将从整体流程中删除切换程序，并允许徽标位于中心而不受影响。

.main-navbar {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  width: 100%;
  font-weight: 500;
  background: black;
}

.nav-toggler {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1rem;
  cursor: pointer;
  margin-left: 1rem;
}

.nav-toggler span {
  width: 1.3rem;
  height: 0.17rem;
  background: white;
  display: block;
}

.brand img {
  display: block; /* not necessary, just added to vertically align image for demo */
}

<header class="main-navbar">
  <div class="nav-toggler">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="brand">
    <a class="logo-link" href="#">
      <img src="https://placeimg.com/150/30/animals" alt="logo-brand-image">
    </a>
  </div>
</header>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62920376

复制

相似问题

问不确定如何沿着主轴分别对齐我的flex项目
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不确定如何沿着主轴分别对齐我的flex项目EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不确定如何沿着主轴分别对齐我的flex项目
EN