Question

考虑以下弹性框方案：

<div id="container">
   <div id="item1">
       <a href="#">Some Link</a>
   </div>
   <div id="item2">I want about 50% of the window</div>
   <div id="item3">me, too!</div>
</div>

有一些造型：

#container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   position: absolute;
}

#container div {
  border: 1px solid red;
} 

#item1 {
  flex: 0 0 auto;
}

#item1 a {
  border: 1px solid green;
  padding: 20pt;
}

#item2 {
  flex: 1 1 auto;
}

#item3 {
  flex: 1 1 auto;
}

第1项应该与其内容所需的一样高。请注意，内部有一个带填充的链接。无论填充是什么，弹性项目大小都只考虑文本的高度。

第2项和第3项应该分享剩下的空间五十五。

here是小提琴。

Answer 1

默认情况下链接为init: function () { var mockFile = { name: <filename>, size: <filesize>, type: <filetype>, url: <file_url> }; this.files.push(mockFile); this.emit('addedfile', mockFile); this.createThumbnailFromUrl(mockFile, mockFile.url); this.emit('complete', mockFile); this._updateMaxFilesReachedClass(); }，不受垂直填充的影响...制作链接display:inline。

inline-block

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
}
#container div {
  border: 1px solid red;
}
#item1 {
  flex: 0 0 auto;
}
#item1 a {
  border: 1px solid green;
  padding: 20pt;
  display: inline-block;
}
#item2 {
  flex: 1 1 auto;
}
#item3 {
  flex: 1 1 auto;
}

让flex项的大小取决于其内容，从而尊重其填充

1 个答案: