GeolageWu 2019-06-25
<div class="columns"> <div class="column"> <div class="box">Hello World</div> </div> <div class="column"> <div class="box">Hello World</div> </div> <div class="column"> <div class="box">Hello World</div> </div> </div>
.box { padding: 20px; border: 1px solid #ddd; } .columns{ display: flex; } .column { flex: 1 }
最重要的一点是给这一行的父元素(columns)的直接子元素(column)设置flex: 1
。这样元素才会平分整行空间,否则就只会占据元素本身的大小,挤在一起。
这里我们按照常用的12列网格系统来计算。那么我们有以下几个需求:
<div class="columns is-multiline"> <div class="column is-6"> <div class="box">Hello World</div> </div> <div class="column is-6"> <div class="box">Hello World</div> </div> <div class="column is-2"> <div class="box">Hello World</div> </div> <div class="column is-10"> <div class="box">Hello World</div> </div> </div>
.columns{ display: flex; } .columns.is-multiline{ flex-wrap: wrap; } .column { flex: 1 } .column.is-6 { width: 50%; flex: none; } .column.is-2{ width: 16.66667%; flex: none; } .column.is-10 { width: 83.333%; flex:none; }
这里的重点是给column
一个辅助类is-*
, is-*
的定义一方面通过百分比指定了宽度,另一方面重要的是设置了flex:none
,否则元素就还是会采用平分宽度的方法而非指定。
第二点是给了columns
一个辅助类is-multiline
。is-multiline
的作用是设置了flex-wrap: wrap。如果没有这个属性,超出12列的宽度之后,这些列就不会向下走,而是再向右延伸。
<div class="columns"> <div class="column is-narrow"> <div class="box">Hello World</div> </div> <div class="column"> <div class="box">Hello World</div> </div> <div class="column is-narrow"> <div class="box">Hello World</div> </div> </div>
.columns{ display: flex; } .column { flex: 1 } .column.is-narrow{ flex:none; }
这里我们给希望只占据元素本来的宽度的column
一个辅助类is-narrow
。它设置了flex:none
这个属性,否则的元三个元素就会平分整行的宽度。添加is-narrow
类,前后两个元素就占据本来的宽度,而中间那个元素就会占据剩余的宽度。