Question

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

MyComp.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>
    );
  }
}

MyComp.css：

.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
}
```

Answer 1

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

这里有一个guide可以使用弹性框

您应该执行以下操作：

.container{
  width: 100%;
  height: 100px;
  display:flex;
}

.a{
  flex: 3;
  background-color: red;
}

.b{
  flex: 1;
  background-color: green;
}


.container-vertical{
  width: 100%;
  height: 100px;
  display:flex;
  flex-direction: column
}

<div class="container">
   <div class="a"></div>
   <div class="b"></div>   
</div>
<br /> <br />
<div class="container-vertical">
   <div class="a"></div>
   <div class="b"></div>   
</div>

Answer 2

您可以使用flex属性flex并以整数形式分配数字，或者，您也可以使用flex-basis属性，也可以在其中指定所需的百分比（％）。

.container{
  display:flex;
  flex-flow: row nowrap;
  height: 200px;
}

.red{
  flex-basis: 66.66666%;
  background-color: red;

}

.green{
  flex-basis: 33.33333%;

  background-color: green;
}

/* OR */



.y{
 flex: 2;
 background-color: yellow;
}

.b{
 flex: 1;
 background-color: blue;
}

<div class="container">
   <div class="red"></div>
   <div class="green"></div>   
</div>
<br/>

<div class="container">
   <div class="y"></div>
   <div class="b"></div>   
</div>

flexbox in react：不调整大小

2 个答案: