CSS flexbox：使用深度嵌套的图像来分摊不断变化的布局尺寸

Question

我无法理解 FlexBox。

这是我想要的：

一个组件div垂直分为 3 个部分：
- 主视图
- 状态栏
- logs' window（通过状态栏中的按钮切换）
logs' window 最大高度：80px（可能会更改为 25%/100%，具体取决于屏幕大小，在未来，所以不要坚持那个固定的 80px 值）
status-bar and logs-window在组件底部div可见AT所有时间（不垂直溢出）
主视图可能包含none，一个或多个内部有图片的项目（不知道会有多少项目）
主视图项目尽可能多地占据space（拉伸图像；保持比例）：垂直和水平
主视图项目必须在达到水平（其他项目或组件的边div）或垂直时立即停止拉伸（状态栏 and/or 组件顶部 div）限制
主视图项 不得缩小到超过某个固定大小 (300x150px) - 如果他们尝试缩小则让它们溢出。

这是它在横向中的大致样子（轮廓只是为了清楚起见）- JSFiddle 的屏幕截图

我已经制作了基本布局，但响应速度让我很吃力。我什至不确定是什么阻碍了我：是图像吗？是深度嵌套吗？是我对flexbox的滥用吗？

简单地说，我希望图像分摊 component/screen 尺寸的变化：当组件 div 扩展时拉伸，当组件 div 收缩时收缩。一定范围内的所有内容：最小 300x150 像素； max - 无论周围 divs 允许什么。

谁能再CSS-savy 帮我修改布局？

/* 
https://flexbox.malven.co/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */

body {
  height: 100vh;
}

.border {
  outline: solid black thin;
  /* border-style: solid;
  border-color: black;
  border-radius: 5px; */
}

.m5 {
  margin-left: 5px;
  margin-right: 5px;
  /* margin-top: 5px;
  margin-bottom: 5px; */
}

.component {
  height: 100%;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
}

.content {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
}

.module1 {
  height: 100%;
}

.module1-main {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.module1-item {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  max-height: 100%;
}

.viewport {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  flex-direction: column;
}

.viewport-thumbnail {
  box-sizing: border-box;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  min-width: 300px;
  min-height: 150px;
}

.menu {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.log-panel {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 80px;
  overflow-y: auto;
}

.full-w {
  width: 100%;
}

.item2 {
  /* display: none; */
}

<html class="border">

<body>
  <div class="component">


    <div class="container border">
      <div class="content">
        <div class="generated module1">
          <div class="module1-main border m5">

            <div class="module1-item border m5 item1">
              <div class="viewport border">
                <img src="https://www2.lunapic.com/editor/premade/transparent.gif" class="viewport-thumbnail">
              </div>
              <div class="menu border">
                <button>crop</button>
                <button>resize</button>
                <span class="full-w">Image_0001.jpg</span>
                <button>share</button>
              </div>
            </div>

            <div class="module1-item border m5 item2">
              <div class="viewport border">
                <img src="https://www2.lunapic.com/editor/premade/transparent.gif" class="viewport-thumbnail">
              </div>
              <div class="menu border">
                <button>crop</button>
                <button>resize</button>
                <span class="full-w">Image_0002.jpg</span>
                <button>share</button>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="status-bar border m5">
        <button>show logs</button>
        <span>Found files: 2</span>
      </div>
      <div class="log-panel border m5">
        <ul>
          <li>Collecting parameters</li>
          <li>In progress...</li>
          <li>Rendering</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

这是 fiddle：https://jsfiddle.net/netikras/uzsr1p4f/79/

旁注 1：HTML 将由 angular 生成。

旁注 2：我真的更喜欢使用 <img> 而不是使用 <div> 和背景图片 hack。

Answer 1

我的尝试：

HTML

<div class="main-view">
  <div class="modules">
    <div class="module1-item border m5 item1">
      <div class="viewport border">
        <img src="https://www2.lunapic.com/editor/premade/transparent.gif" class="viewport-thumbnail">
      </div>
      <div class="menu border">
        <button>crop</button>
        <button>resize</button>
        <span class="full-w">Image_0001.jpg</span>
        <button>share</button>
      </div>
    </div>
    <div class="module1-item border m5 item2">
      <div class="viewport border">
        <img src="https://www2.lunapic.com/editor/premade/transparent.gif" class="viewport-thumbnail">
      </div>
      <div class="menu border">
        <button>crop</button>
        <button>resize</button>
        <span class="full-w">Image_0002.jpg</span>
        <button>share</button>
      </div>
    </div>
  </div>
<div class="bottom-windows">
    <div class="status-bar border m5">
    <button>show logs</button>
    <span>Found files: 2</span>
  </div>

  <div class="logs-window">
    <ul>
      <li>Collecting parameters</li>
      <li>In progress...</li>
      <li>Rendering</li>
    </ul>
  </div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

.main-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modules {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.module1-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.viewport {
  display: flex;
  justify-content: center;
}

.viewport-thumbnail {
  width: 100%;
  height: auto;
}

.bottom-windows {
  max-height: 25%;
  display: flex;
  flex-direction: column;
}

/* Do this 300px and down */
@media only screen and (max-width: 300px) {
  .modules {
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .bottom-windows {
    width: 100%;
    align-self: flex-end;
  }
}

Codepen: Click here

Answer 2

感谢@dom_ahdigital，我想我终于成功了！对规范稍作修改：该项目始终最大化。只有图片在改变尺寸。

我的错误是没有完全理解 flex-grow 和 flex-basis。

这是我的解决方案。适用于我尝试过的任何调整大小。

/* 
https://flexbox.malven.co/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */

html,
body {
  height: 100%;
  margin: 0;
}

.bottom-windows {
  max-height: 25%;
  flex: 1 1 0;
  display: flex;
  flex-flow: column nowrap;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
}

.content {
  flex: 4 1 0;
}

.module1 {
  height: 100%;
}

.module1-main {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: stretch;
  height: 100%;
  overflow-y: auto;
}

.module1-item {
  flex: 1 1 0;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

.viewport {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.viewport-thumbnail {
  flex: 1 1 0;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.menu {
  flex: 1 1 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.log-panel {
  flex: 1 1 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
  /* height: 80px; */
  overflow-y: auto;
}

.full-w {
  width: 100%;
}

.item2 {
  /* display: none; */
}

.m5 {
  margin-left: 5px;
  margin-right: 5px;
  /* margin-top: 5px;
  margin-bottom: 5px; */
}

.border {
  outline: black solid thin;
  /*     border-style: solid;
      border-color: black;
      border-radius: 5px; */
}

<div class="container">
  <div class="content">
    <div class="generated module1">
      <div class="module1-main">

        <div class="module1-item m5 item1 border">
          <div class="viewport">
            <img src="https://www2.lunapic.com/editor/premade/transparent.gif" class="viewport-thumbnail">
          </div>
          <div class="menu border">
            <button>crop</button>
            <button>resize</button>
            <span class="full-w">Image_0001.jpg</span>
            <button>share</button>
          </div>
        </div>

        <div class="module1-item m5 item2 border">
          <div class="viewport">
            <img src="https://media.istockphoto.com/vectors/cute-penguin-icon-in-flat-style-vector-id868646936" class="viewport-thumbnail">
          </div>
          <div class="menu border">
            <button>crop</button>
            <button>resize</button>
            <span class="full-w">Image_0002.jpg</span>
            <button>share</button>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="bottom-windows border">
    <div class="status-bar">
      <button>show logs</button>
    </div>
    <div class="log-panel border">
      <ul>
        <li>Collecting parameters</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Downloading</li>
        <li>Extracting</li>
        <li>In progress...</li>
        <li>Rendering</li>
        <li>Done</li>
      </ul>
    </div>
  </div>
</div>

JSFiddle：https://jsfiddle.net/netikras/uzsr1p4f/142/

这是现在的样子

宽

正常

缩小

非常窄且可滚动

CSS flexbox：使用深度嵌套的图像来分摊不断变化的布局尺寸

CSS flexbox: use deeply nested images to amortize changing layout dimensions

css

layout

image

flexbox

responsive-design