如何设置使用flex的列宽

Question

I am working on react web app which has less styling, so under wrapper I have 3 columns, such that leftWrap is col-3, rightWrap is col-4, and rest width is centerWrap. How can i apply flex while i just know its col-* classnames

 <div className={styles.Home__wrapper}>
      <div className={styles.Home__leftWrap}> .... </div>
      <div className={styles.Home__centerWrap}> .... </div>
      <div className={styles.Home__rightWrap}> .... </div>
    </div>

.Home {
 &__wrapper {
  display : flex;
  flex-wrap: nowrap;
  width : 100%;
  box-sizing: border-box;
 }

 &__leftWrap {
  display : flex;
 }
 &__rightWrap {
  display : flex;
 }
 &__centerWrap {
  display : flex;
 }
}

How to set width to each column className as per above mentioned, is it through cal() method

Answer 1

将容器 div 上的 display CSS 属性设置为 flex，并使用 child 上的 flex 属性仁元素。 Flex 会将分配给每个 children 元素的 flex 数量相加，计算出要填充的“总”步数，然后根据可用的 space 剩余和计算每个步数的值通过将计算出的步长值乘以 child 元素 flex 值来计算每个 child 的显示宽度。在你的情况下，看起来你的左右 children 有固定的宽度，你希望中心元素占据剩余的 space，所以只需将 flex 设置为 1 在中心元素上。

._wrapper {
  display : flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
 }

 ._leftWrap {
  width: 50px;
  background-color: red;
 }
 ._rightWrap {
  width: 100px;
  background-color: blue;
 }
 ._centerWrap {
  flex: 1;
  background-color: yellow;
 }

<div class="_wrapper">
      <div class="_leftWrap"> .... </div>
      <div class="_centerWrap"> .... </div>
      <div class="_rightWrap"> .... </div>
    </div>

如何设置使用flex的列宽

How to set column width which uses flex

javascript

css

less

reactjs

bootstrap-4