如何使用 CSS flexbox 设置固定宽度的列 [英] How to set a fixed width column with CSS flexbox
问题描述
CodePen:http://codepen.io/anon/pen/RPNpaP.>
我希望红色框在并排视图中只有 25 em 宽 - 我试图通过在此媒体查询中设置 CSS 来实现这一点:
@media all and (min-width: 811px) {...}
到:
.flexbox .red {宽度:25em;}
但是当我这样做时,就会发生这种情况:
http://i.imgur.com/niFBrwt.png
知道我做错了什么吗?
你应该使用 flex
或 flex-basis
属性而不是 width
>.阅读有关 MDN 的更多信息.
.flexbox .red {弹性:0 0 25em;}
flex
CSS 属性是一个简写属性,用于指定 flex 项改变其尺寸以填充可用空间的能力.它包含:
flex-grow: 0;/* 不增长 - 初始值:0 */弹性收缩:0;/* 不收缩 - 初始值:1 */弹性基础:25em;/* 宽度/高度 - 初始值:自动 */
<小时>
一个简单的演示展示了如何将第一列设置为 50px
固定宽度.
.flexbox {显示:弹性;}.红色的 {背景:红色;弹性:0 0 50px;}.绿色 {背景:绿色;弹性:1;}.蓝色 {背景:蓝色;弹性:1;}
<div class="red">1</div><div class="green">2</div><div class="blue">3</div>
根据您的代码查看更新的代码笔.
CodePen: http://codepen.io/anon/pen/RPNpaP.
I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:
@media all and (min-width: 811px) {...}
to:
.flexbox .red {
width: 25em;
}
But when I do that, this happens:
http://i.imgur.com/niFBrwt.png
Any idea what I'm doing wrong?
You should use the flex
or flex-basis
property rather than width
. Read more on MDN.
.flexbox .red {
flex: 0 0 25em;
}
The flex
CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:
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 */
A simple demo shows how to set the first column to 50px
fixed width.
.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>
See the updated codepen based on your code.
这篇关于如何使用 CSS flexbox 设置固定宽度的列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!