Flex布局练习-其它布局
学习来源:阮一峰的flex布局实战
1.实现圣杯布局效果
<style type="text/css">
/*圣杯容器*/
.HolyGail{
height: 100px;
width: 120px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-wrap: wrap;
flex-direction: column;
}
/*头部导航栏*/
header{
height: 20px;
background-color: red;
}
/*圣杯内部容器,容纳中间的三个竖栏*/
.HolyGail-body{
height: 60px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
background-color: gold;
}
/*页面左边的导航栏*/
.Holy-nav{
flex: 0 0 20px;
background-color: yellow;
}
/*页面中间的主栏*/
.Holy-content{
flex-grow: 1;
background-color: blue;
}
/*页面右边的广告栏*/
.Holy-ads{
flex: 0 0 20px;
background-color: grey;
}
/*底部导航栏*/
footer{
height: 20px;
background-color: green;
}
</style>
<div class="HolyGail">
<header></header>
<div class="HolyGail-body">
<nav class="Holy-nav"></nav>
<main class="Holy-content"></main>
<aside class="Holy-ads"></aside>
</div>
<footer></footer>
</div>
如果是刚刚看完网格布局,再来看这个圣杯布局,就不需要过多解释了
2.输入框布局
<style type="text/css">
/*container指的是包裹提示信息,输入框,图标按钮的容器*/
.container{
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 120px;
height: 16px;
}
</style>
<div class="container">
<span style="flex: 0 0 50px; font-size: 5px; display: inline-block; text-align: center; line-height: 14px; border: 1px solid black; border-right: 0px; box-sizing: border-box;">请输入您的地址</span>
<input type="text" style="flex-grow: 1; border: 1px solid black; outline: none;">
<div style="width: 16px; height: 16px; border: 1px solid black; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-left: 0px;">
<img src="./launch/map.png" width="14px" height="14px" style="vertical-align: top;">
</div>
</div>
这上面采用的是P标签+input标签+div嵌套img标签来实现
当时遇到的问题(不是布局相关):
img在嵌套进div时发现上面总会有些间隙。
解决问题:
1.首先说明一下之前概念出错了,上了不知名网课导致概念乱讲。
h5中元素分为inline 和 block(当然不全,会总结一个专题来捋清楚)。大多数人称为行内元素和块级元素。
行内元素和块级元素具体区别在此不做赘述。
只不过有一些行内元素宽度高度是可以设置的,如img,button等等
注意:img不是inline-block元素(MDN原话)
(上面是待解决问题)
2.行内元素在垂直对齐上默认是按照文字基线baseline来对齐的,这也就是为什么顶部会有空隙的原因
解决方案有很多。可以设置容器文字大小为0px,可以把img设置成块级元素,
可以把img的垂直对齐方式设置为top等等
3.悬挂布局
<style type="text/css">
p{
padding: 0px;
margin: 0px;
}
</style>
<div style="display: flex; flex-wrap: wrap; flex-direction: column; width: 300px; height: 300px; background-color: grey;">
<p style="height: 30px;">Basic Examples</p>
<div style="display: flex; height: 150px; width: 300px;">
<div style="flex-grow: 1; padding: 10px; padding-right: 0px; display: flex;">
<div style="flex: 0 0 16px; background-color: yellow;">
</div>
<div style="flex-grow: 1; background-color: purple;">
</div>
</div>
<div style="flex-grow: 1; padding: 10px; display: flex;">
<div style="flex: 0 0 16px; background-color: gold;">
</div>
<div style="flex-grow: 1; background-color: red;">
</div>
</div>
</div>
在这里也要再提一下,大多数时候使用flex布局会让你像上面一样项目之间具有间隙。
可以这样解决
1.设置好flex-basis的百分比之后再将justify-content调整为space-around或者space-between
2.可以在项目之间设置空白占位项目
3.可以设置margin,padding