最近面试有遇到这样的题,这才发现自己很久都疏于整理css的知识了,今天来整理一下。为了代码简便,这里实现四宫格以代替九宫格
题目:实现四宫格,子元素宽度自适应父元素宽度,间距为10px
实现方法有:
- Flex
- Grid
- Table
- Float TODO
Flex
由于flex是元素在一维的布局,所以用div元素将子元素分不同行,子元素用flex-grow
来实现自适应宽度
1.有row分隔行
<div class="container">
<div class='row'>
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class='row'>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<style type="text/css">
.container { }
.row {
display: flex;
margin: 10px 0;
}
.item {
margin: 0 10px;
background: red;
flex-grow: 1;
}
.item:last-child {
margin-left: 0;
}
</style>
2.没有row分隔行(为了增加难度这里写九宫格)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style type="text/css">
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background: red;
// 方法一
width: calc(100% / 3);
// 方法二
flex-basis: calc(100% / 3);
}
</style>
Grid
grid就是为这种二维布局而生的, fr
单位类似于flex-grow
实现自适应
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style type="text/css">
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.item {
background: red;
}
</style>
Table
我发现table布局还是很实用的,宽度自适应也可以用table实现。
<div class="container">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="row">
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<style type="text/css">
.container {
display: table;
width: 100%;
border-spacing: 10px;
}
.row {
display: table-row;
}
.item {
background: red;
display: table-cell;
}
</style>