时间戳

首页 > 解决方案 > Same width as height on a flex child element

css - Same width as height on a flex child element

问题描述

I'm working on a navbar where I will have a burger menu for toggling an extended menu.

I want to avoid to explicitly set a width to the burger menu element (.extendedMenu__toggle) and have it scale based on the font-size set on .header if possible.

The element gets it height from the parent as it's flex, but not sure how I can translate that into a proper width property so that I get a perfect square.

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 1.3rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

标签： cssflexbox

解决方案

选项 #1：使用 Javascript。元素渲染后，您将检查高度，然后设置flex-basis为元素高度。我也设置overflow: hidden了，因为我的内容是“不方形的”。

SO的代码片段似乎不喜欢window.onload所以这是一个codepen示例

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
  overflow:hidden;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div id="box" class="extendedMenu__toggle">
       menu
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

选项 #2：使用图像。这有点骇人听闻，但只要在 HTML 中呈现方形图像，它就会尝试保持其比例。以下是几种可用的方法：

  • 在 HTML 中放置具有透明背景的汉堡菜单图像。（变大，这样你就不会扩大，只是缩小）。
  • 在 HTML 中放置一个 10px x 10px 的透明图像，并在其上绝对放置其他内容。
  • 在 CSS 中创建一个pseudo classwithcontent: url(image.jpg);然后在其上方分层内容。

第一个是最容易展示的，所以我正在做那个。我会max-height在图像中添加一个，这样它就不会失控。

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}
.extendedMenu__toggle img {
  display:block;
  max-height: 6rem;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
       <img src="https://cdn1.imggmi.com/uploads/2018/10/15/e86f8a312edd60d643c8d80212b64dba-full.png" />
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

推荐阅读