时间戳

首页 > 解决方案 > 如何设置使用 flex 的列宽

javascript - 如何设置使用 flex 的列宽

问题描述

我正在开发样式较少的反应网络应用程序，所以在包装器下我有 3 列，这样 leftWrap 是 col-3，rightWrap 是 col-4，其余宽度是 centerWrap。我只知道它的 col-* 类名时如何应用 flex

 <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;
 }
}

如上所述如何为每列className设置宽度，是通过cal（）方法吗

标签： javascriptcssreactjsbootstrap-4less

解决方案

将display容器 div 上的 CSS 属性设置为flex，并使用flex子元素上的属性。Flex 会将flex分配给每个子元素的数字相加，以计算要填充的“总”步数，然后根据剩余可用空间计算每个步的值，并通过乘以计算出的步宽值来计算每个子元素的显示宽度通过子元素flex值。在您的情况下，您的左右孩子看起来有固定的宽度，并且您希望中心元素占据剩余空间，因此只需设置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>

推荐阅读