Javascript react中的flexbox：不调整大小

我试图使用react.js在屏幕上显示1/4屏幕的绿色块和3/4屏幕的黄色块 我有以下代码-但绿色块和黄色块的大小相同

mycop.js：

import React from 'react';
import './MyComp.css'

export default class MyComp extends React.Component {
  render() {
    return (
      <div className="wrapp">
        <div className="greenBlock">
          <h1>green </h1>
        </div>
        <div className="yellowBlock">
          <h1>yellow </h1>
        </div>
      </div>
    );
  }
}

---

我认为不能在flex属性上使用浮点值

下面是一个使用flex box的示例

你应该这样做：

.集装箱{ 宽度：100%； 高度：100px； 显示器：flex； } .a{ 弹性：3； 背景色：红色； } .b{ 弹性：1； 背景颜色：绿色； } .货柜垂直{ 宽度：100%； 高度：100px； 显示器：flex； 弯曲方向：柱 }

---

您可以使用flex属性flex并以整数形式分配数字， 或者您也可以使用flex basis属性，在该属性中，您还可以以%为单位指定所需的比率

.集装箱{ 显示器：flex； flex-flow：行nowrap； 高度：200px； } 瑞德先生{ 弹性基准：66.666%； 背景色：红色； } 格林先生{ 弹性基准：33.33333%； 背景颜色：绿色； } /*或*/ .y{ 弹性：2； 背景颜色：黄色； } .b{ 弹性：1； 背景颜色：蓝色； }

---

波特拉：你的例子帮助我找到了问题所在，但这不是浮点值。如果我删除“弯曲方向”：列；它起作用了。你知道为什么吗？当你将flex方向更改为column时，你会更改flex容器的轴，因此当你更改子对象的flex值时，它们会在Y轴高度上增长或收缩。我编辑了我的答案，向你展示了当flex容器将flex方向设置为column时它是如何工作的示例

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

.wrapp {
  display: flex;
  flex-direction: column;
}

.greenBlock {
  background-color: green;
  flex: 0.25
}

.yellowBlock {
  background-color: yellow;
  flex: 0.75
}
```