Question

我目前有这个

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Madokami</title>
        <link rel="stylesheet" href="css/CSS">
    </head>
    <body>
        <div class="container">
            <div class="box color1">Box One</div>
            <div class="box color2">Box Two</div>
            <div class="box color3">Box Three</div>
            <div class="box color4">Box Four</div>
            <div class="box color5">Box Five</div>
        </div>
    </body>
</html>

我编写了这段代码https://jsfiddle.net/qu02ch4z/1/，并用它创建了一个边栏，可以在我的网站上通过flex使用它，而不仅仅是创建单个盒子。问题是，当我使用flexboxes时，它会不断离开站点，并且不希望工作

Answer 1

我不太确定这个问题，但是我发现Box Three与Box Four重叠。这样做是由于宽度固定为10%并且文本不合适。

分配另一个font-size对我有用。例如。我使用的是view window大小： vw 。

在您的.box类中，进行以下更改：

font-size: 1.2em;至font-size: 2vw;。

Answer 2

我不确定我是否理解正确。但是，如果要在视口高度上拉伸所有框，并且不超出此范围，则可以将容器的高度设置为100vh，从框中移除固定的line-height并添加flex: 1给他们。

body {
  margin: 0;
  font-family: verdena, sans-serif;
  background: #262626;
}

.container {
  /* 100 % of the viewport height */
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.box {
  /* stretch boxes to fill 100% of the height */
  flex: 1;
  
  /* center text */
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 15%;
  padding: 0.5em;
  transition: .5s;
}

.box:hover {
  width: 30%
}

.color1 { background: #f00; }
.color2 { background: #A16340; }
.color3 { background: #A6A340; }
.color4 { background: #A12224; }
.color5 { background: #f66340; }

<div class="container">
  <div class="box color1">Box One</div>
  <div class="box color2">Box Two</div>
  <div class="box color3">Box Three</div>
  <div class="box color4">Box Four</div>
  <div class="box color5">Box Five</div>
</div>

编辑：如果要使框保持其原始大小并且仅缩小，如果有很多，则可以使用flex-grow: 0; flex-shrink: 1; flex-basis: 20px;，其中flex-basis定义默认大小。这是一个交互式示例：

const heightSlider = document.getElementById('height-slider');
const heightSliderValue = document.getElementById('height-slider-value');
const container = document.getElementById('container');

heightSlider.addEventListener('input', changeContainerHeight);

function changeContainerHeight(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.8;
  const newHeight = Math.round(110 * factor);
  container.style.height = `${newHeight}px`;

  heightSliderValue.innerText = newHeight;
}

changeContainerHeight();


const flexBasisSlider = document.getElementById('flex-basis-slider');
const flexBasisSliderValue = document.getElementById('flex-basis-slider-value');
const boxes = document.querySelectorAll('.box');

flexBasisSlider.addEventListener('input', changeFlexBasis);

function changeFlexBasis(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.5;
  const newFlexBasis = Math.round(16 * factor)
  boxes.forEach(box => {
    box.style.flexBasis = `${newFlexBasis}px`;
  })
  flexBasisSliderValue.innerText = newFlexBasis;
}

changeFlexBasis();

body {
  font-family: sans-serif;
}

.form {
  display: flex;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 300px;
  min-width: 150px;
  text-align: center;
  margin: 1rem auto;
}

.container {
  height: 100px;
  background-color: burlywood;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8px;
  font-size: 0.5rem;
  width: 50%;
  color: #fff;
  background-color: cornflowerblue;
  border-bottom: 2px solid #fff;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="form">
  <div class="form-group">
    <label for="height-slider">Container Height: <span id="height-slider-value">88</span>px</label>
    <input type="range" id="height-slider" step="1" value="80">
  </div>
  <div class="form-group">
    <label for="flex-basis-slider">Box Flex Basis: <span id="flex-basis-slider-value">8</span>px</label>
    <input type="range" id="flex-basis-slider" step="1" value="50">
  </div>
</div>
<div class="container" id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

当我使用流量箱时，即使设置了最大高度，我的箱也会用完

2 个答案: