1. 一行的元素平分整行宽度
<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
。这样元素才会平分整行空间,否则就只会占据元素本身的大小,挤在一起。
2. 指定元素占据一定的宽度
这里我们按照常用的12列网格系统来计算。那么我们有以下几个需求:
- 指定元素占据的列数
- 当总的列数加起来超过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列的宽度之后,这些列就不会向下走,而是再向右延伸。
3. 元素占据原本的宽度
<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
类,前后两个元素就占据本来的宽度,而中间那个元素就会占据剩余的宽度。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。