【问题标题】:How to set a fixed width column with CSS flexbox如何使用 CSS flexbox 设置固定宽度的列
【发布时间】:2015-07-05 06:55:56
【问题描述】:

CodePen:http://codepen.io/anon/pen/RPNpaP.

我希望红色框在并排视图中只有 25 em 宽 - 我试图通过在此媒体查询中设置 CSS 来实现这一点:

@media all and (min-width: 811px) {...}

到:

.flexbox .red {
  width: 25em;
}

但是当我这样做时,会发生这种情况:

http://i.imgur.com/niFBrwt.png

知道我做错了什么吗?

【问题讨论】:

    标签: html css flexbox


    【解决方案1】:

    您应该使用flexflex-basis 属性而不是width。阅读更多MDN

    .flexbox .red {
      flex: 0 0 25em;
    }
    

    flex CSS 属性是一个简写属性,用于指定弹性项目改变其尺寸以填充可用空间的能力。它包含:

    flex-grow: 0;     /* do not grow   - initial value: 0 */
    flex-shrink: 0;   /* do not shrink - initial value: 1 */
    flex-basis: 25em; /* width/height  - initial value: auto */
    

    一个简单的演示展示了如何将第一列设置为50px 固定宽度。

    .flexbox {
      display: flex;
    }
    .red {
      background: red;
      flex: 0 0 50px;
    }
    .green {
      background: green;
      flex: 1;
    }
    .blue {
      background: blue;
      flex: 1;
    }
    <div class="flexbox">
      <div class="red">1</div>
      <div class="green">2</div>
      <div class="blue">3</div>
    </div>

    根据您的代码查看updated codepen

    【讨论】:

      【解决方案2】:

      如果有人想要一个带有百分比 (%) 的响应式弹性框,那么媒体查询会容易得多。

      flex-basis: 25%;
      

      测试的时候会流畅很多。

      // VARIABLES
      $screen-xs:                                         480px;
      $screen-sm:                                         768px;
      $screen-md:                                         992px;
      $screen-lg:                                         1200px;
      $screen-xl:                                         1400px;
      $screen-xxl:                                        1600px;
      
      // QUERIES
      @media screen (max-width: $screen-lg) {
          flex-basis: 25%;
      }
      
      @media screen (max-width: $screen-md) {
          flex-basis: 33.33%;
      }
      

      【讨论】:

        【解决方案3】:

        实际上,如果你真的想使用 width CSS 属性,另一种解决方法是应用这个:

        .flexbox .red {
          width: 100%;
          max-width: 25em;
        }
        

        【讨论】:

          猜你喜欢
          • 2015-08-09
          • 2020-10-11
          • 2021-01-06
          • 2018-01-16
          • 2013-06-15
          • 2017-01-27
          • 1970-01-01
          • 2021-12-08
          • 1970-01-01
          相关资源
          最近更新 更多