Flex布局练习-其它布局 1.实现圣杯布局效果2.输入框布局3.悬挂布局
学习来源：kndcs的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-between2.可以在项目之间设置空白占位项目3.可以设置margin，padding