时间戳

首页 > 解决方案 > 当方向为列时，Flex 收缩无法按预期工作

html - 当方向为列时，Flex 收缩无法按预期工作

问题描述

我在下面提供了以下小片段和沙箱。当 flex-direction 设置为“row”时，图像会按预期缩小以适应。但是，当我设置为“列”时，图像不再按预期缩小。我试过根据其他帖子设置高度，但无法正常工作。

通过在 flex-direction 下将“行”更改为“列”，在沙箱中自己尝试一下。您可以更改沙箱的窗口大小，以查看图像如何更改大小以适应。当设置为列时，图像最终只是父级的 100% 宽度。我似乎无法弄清楚这一点！

CSS：

.container {
  background-color: blue;
  min-width: 0px;
  min-height: 0px;
  max-height: 400px;
  max-width: 400px;
}

.cell {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  flex: 1 0 50px;
}

.image-pic {
  display: block;
  min-width: 0px;
  min-height: 0px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

反应：

import React from "react";
import "./styles.css";
import { Image } from "react-bootstrap";
import useravatar from "./user.jpg";

export default function App() {
  return (
    <>
      <div className="container">
        <div className="cell">
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
         
         
        </div>
      </div>
    </>
  );
}

在此处查看沙箱：

https://codesandbox.io/s/flex-wrap-with-bootsrap-forked-808gd?file=/src/styles.css

标签： htmlcssreactjsflexbox

解决方案

我是初学者，所以我可能错了，但我解决问题的想法是，当您为图像父 div 提供一定的宽度和高度时，您可以控制它们。因此，通过这种方式，您可以避免它们在包装时变大。（您也使用flex: 1 0 50px但仅 fl​​ex -basis除外%）

.cell {
  width: 100%;
  display: flex;
  flex:0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  width:50px;
  height:50px;
}

推荐阅读