[英]css flexbox 3-column layout where first is fixed width
I am trying to better understand flex box css and have a main layout for all pages. 我试图更好地了解Flex Box CSS,并为所有页面提供主要布局。 It is 3 columns where the first column is fixed width and the others can be any size so long as all 3 take up 100% width. 它是3列,其中第一列是固定宽度的,其他列可以是任意大小,只要所有3列都占用100%的宽度。
I believe the problem is in .col
class but unsure how to set the 1st column and let the other grow. 我相信问题出在.col
类中,但不确定如何设置第一列并让其他列增长。 Thank you. 谢谢。
.wrapper { display: flex; flex-direction: row; } .col { flex-basis: 25%; align-items: stretch; }
<div class="wrapper"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div>
You simply need to specify a fixed width to the first one and then set flex:1
to the other so they take the remaining space and fill 100% of the container space: 您只需要为第一个指定一个固定宽度,然后将flex:1
设置为另一个宽度,以便它们占用剩余空间并填充100%的容器空间:
.wrapper { display: flex; flex-direction: row; } .col { flex: 1; background: red; } .col:first-child { width: 100px; /* Or a percentage value */ flex:initial; background: green; }
<div class="wrapper"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.