有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.
...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.
我想知道flex-basis与实际宽度的不同之处:
编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.
我试图flexbox用两列来实现,左边是固定宽度,右边是随页面大小改变而缩放的.例如:
<style>
.flex_container {
display: flex;
width: 100%;
}
.flex_col_left {
width: 200px;
}
.flex_col_right {
width: 85%;
}
</style>
<div class = "flex_container">
<div class = "flex_col_left">
.....
</div>
<div class = "flex_col_right">
.....
</div>
<div>
这在某种程度上起作用,但是当我混合px和%时它感觉不对.这样做是不正确的,如果是这样,什么可能是更好的解决方案？
编辑类命名问题是一个错字,现在已修复.
我试图让我的头围绕Flexbox只是我无法弄清楚一些事情.
我已经构建了一个左侧列为290px且右侧为"内容区域"的布局.
我希望内容区域是流畅的,并且都是100%的高度.我有点实现了这一点,但如果我用宽度为100vw的东西填充内容区域,它会将左列向下推.
.right_col {
min-height: 792px;
height: 100%;
margin-left: 0px;
background: #F7F7F7;
display: flex;
padding: 0 !important;
width: 100%;
}
.callout-panel {
background: #fff;
width: 290px;
float: none;
clear: both;
padding: 0 20px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100vw;
margin-bottom: 0;
}<div class="right_col">
<div class="callout-panel">Left column</div>
<section class="page-inner">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span …目前我有一些类似于下面的代码。我试图用 300px 的设置宽度使红色列无响应，但保持蓝色列的响应性。
.specific-image-container {
display: flex;
position: relative;
width: 100%;
}
.specific-image-column {
flex: 4;
background-color: blue;
}
.more-images-column {
flex: 1;
background-color: red;
}
.content {
height: 300px;
}<div class="specific-image-container">
<div class="specific-image-column">
<div class='content'></div>
</div>
<div class="more-images-column">
<div class='content'></div>
</div>
</div>