我正在尝试建立一个具有三列的flexbox布局,其中左列和右列具有固定的宽度,而中间列可以弯曲以填充可用空间。
尽管设置了列的尺寸,但它们似乎仍会随着窗口缩小而缩小。
有人知道如何做到这一点吗?
我需要做的另一件事是基于用户交互隐藏右列,在这种情况下,左列仍将保持其固定宽度,而中间列将填充其余空间。
#container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p> </div> <div class="column center"> <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt=""> </div> <div class="column right"> Balint Zsako <br/> Someone’s Knocking at My Door <br/> 01.12.13 </div> </div>
除了使用width(这是使用flexbox时的建议)之外,您还可以使用以下flex: 0 0 230px;方法:
width
flex: 0 0 230px;
0
flex-grow
flex-shrink
230px
flex-basis
这意味着:永远是230px。
哦,您不需要justify-content和align-items。
justify-content
align-items