Question

我正在尝试使用flex将内容放入div中。完美地在flex-direction上工作：（Standar），但不是在flex-direction上工作：在“列”中只是溢出了我的div，请不要调整其中元素的大小。

我如何在不知道要素素的情况下调整要素的大小以适合div？

https://codepen.io/nandordena/pen/jObjJNw

HTML

<body>
<div class="column">
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
</div>

<div class="row">
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
</div>
</body>

CSS

div{
  border:solid 1px #f00;
  margin:1px;
  flex:1;
}
body{
  border:solid 1px #00f;
  pading:1px;
  display:flex;
  height: 500px;
  width: 500px;
}
.row{
  display:flex;
  flex-direction:row;
}
.column{
  display: flex;
  flex-direction:column;
}
video {
  max-height:100%;
  max-width:100%;
}

Answer 1

可能最简单（不确定是否正确的方法），使列增长而不收缩。您可以通过将flex: 1 0 auto;添加到包装器（.row > div）中来实现这一点

Answer 2

网格可以解决问题

.grd {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 50px;
}

.item1 {
  background-color: blue;
  width: 120px;
  grid-row: 1;
}

.item2 {
  background-color: pink;
  width: 1fr;
  grid-row: 1;
}

.item3 {
  background-color: red;
  width: 20px;
  grid-row: 1;
}

.item4 {
  background-color: darkblue;
  width: 1fr;
  grid-row: 1;
}

<div class="grd">
  <div class="item1">One</div>
  <div class="item2">Two</div>
  <div class="item3">Three</div>
  <div class="item4">Four</div>
</div>

使内容适合弯曲方向列

2 个答案: