如何使用 CSS flexbox 设置固定宽度的列

Posted 2023-03-05

【中文标题】如何使用 CSS flexbox 设置固定宽度的列

【英文标题】：How to set a fixed width column with 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

知道我做错了什么吗？

【参考方案1】：

您应该使用flex 或flex-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;