css 当另一个div的高度更改或对其内容执行换行时，将伸缩方向更改为列

eyh26e7m 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(106)

我实际上使用的是React MUI V5，基本上需要在前面的div更改高度或换行时将div的flex方向从行更改为列。
这里是一个简单的例子，我目前在纯HTML/CSS，但不确定是否有其他方法与flex框来实现这一点：

.parent{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .child1{
        display: flex;
        max-width: 80%;
        padding: 10px;
      }
      .child2{
        display: flex;
        max-width: 80%;
        height: 30px;
        flex-direction: row;
      }

    <div class="parent">
      <div class="child1">
<p>
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
   </p>
    
      </div>
      <div class="child2">
        <button>Button1</button>
        <button>Button2</button>
      </div>
    </div>

我已经创建了上面的jsFiddle here。
基本上，当类child1的div是单行（没有换行或高度变化）时，div类child2保持为flex-direction: row，否则当child1类换行或改变高度时，这需要改变为flex-direction: column。
不确定如何在我的MUI组件中实现这一点，也不确定我是否可以使用MUI V5断点？
对于jsFiddle示例，flex-direction需要更改为column，因为child1 div已经 Package 了它的内容。

css

来源：https://stackoverflow.com/questions/74846519/change-flex-direction-to-column-when-height-of-another-div-changes-or-performs-a

2条答案

按热度按时间

juzqafwq1#

使用CSS或MUI V5无法实现这一点

您需要使用媒体查询或javascript进行此操作

使用Javascript时，当项目被 Package 时，它的元素o f f s e t offsetheight将变为大于0 baseheight，然后更改flex方向。

function isWrraped(id) {
    let el = document.getElementById(id);
    // 178 is base height
    return (el.offsetHeight > 178);
}

window.onresize = function (event) {
   isWrraped("child1");
}

赞(0）回复(0）举报 2022-12-20

d6kp6zgx2#

在您的代码示例中，我没有看到React或MUI的任何痕迹。
您需要为第一个子对象的当前高度指定一个状态。
使用第一个子对象的ref，我们将使用useLayourEffect内的每个渲染更新height，以便获得最新的div高度。
我还使用了MUI sx props来应用样式。

import { Box } from "@mui/material";
import React, { useLayoutEffect, useRef, useState } from "react";

export default function test() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);

  useLayoutEffect(() => {
    setHeight(ref.current.clientHeight);
  });

  return (
    <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
      <Box
        sx={{
          display: "flex",
          maxWidth: "80%",
          padding: "10px",
        }}
        ref={ref}
      >
        <p>
          so much data here. so much data here so much data here so much data
          hereso much data here v so much data here v so much data here vso so
          {height}
        </p>
      </Box>
      <Box
        sx={{
          display: "flex",
          maxWidth: "80%",
          flexDirection: height < 45 ? "row" : "column",
        }}
      >
        <button>Button1</button>
        <button>Button2</button>
      </Box>
    </Box>
  );
}

赞(0）回复(0）举报 2022-12-20

我来回答

css 当另一个div的高度更改或对其内容执行换行时，将伸缩方向更改为列

2条答案

相关问题

热门标签

最新问答