前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局）

导航栏

<nav><ul><li>首页li><li>课程li><li>教资li><li>关于我们li>ul>
nav>

基础样式：

    body, ul, li {margin: 0;padding: 0;list-style: none;}nav {height: 50px;}ul {width: 600px;background: #ccc;font-size: 0;}li {width: 150px;display: inline-block;font-size: 16px;color: #fff;height: 50px;line-height: 50px;text-align: center;background: linear-gradient(to right, #888 ,transparent 40%),linear-gradient(to right, transparent 60%,#888);}

效果：

其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；为了让四个li充满ul，计算了每个li的宽度
如果要在li上加border，需要重新计算li的宽度，或者用IE6混杂盒模型
还可以用float，li脱离文档流，让其横放，并清除浮动
修改li，注释掉display: inline-block;，并添加清除浮动的代码

li {width: 150px;/* display: inline-block; */float: left;font-size: 16px;color: #fff;height: 50px;line-height: 50px;text-align: center;background: linear-gradient(to right, #888 ,transparent 40%),linear-gradient(to right, transparent 60%,#888);
}
ul::after{content:'';display:block;clear:both;
}

效果一致

用flex布局：
ul设置成flex容器；li设置flex-grow: 1;，
（改动就这两处，代码就不放了）
优点：
各li1：1比例缩放，充满ul；
即使设置了border也不会超出；
不用计算各li的宽度，解决了各li计算宽度可能会有小数除不尽的困扰；
即使li个数不定，可能4个可能5个，依然不会超出ul，flex-shrink默认为1；
实乃神器也

两列三列布局

两列布局：左边一列固定，其他自适应
两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；
当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2
一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌

    <div class="wrapper"><div class="left">我是leftdiv><div class="center">我是centerdiv>div>

.wrapper {display: flex;height: 100px;min-width: 600px;
}
.left {width: 200px;background: royalblue;}
.center {flex-grow: 1;background: rosybrown;
}

效果：

三列布局：左右固定，中间自适应
在两列的基础上，加第三个div，并设置它的宽度和背景颜色

.right {width: 200px;background: purple;
}

    <style>body,ul,li {margin: 0;padding: 0;list-style: none;}nav {height: 50px;background: #ccc;}ul {width: 100%;height: 50px;display: flex;justify-content: flex-end;}li {width: 100px;height: 50px;text-align: center;line-height: 50px;background: linear-gradient(to right, #999,transparent 40%),linear-gradient(to right,transparent 60%, #999);/* border: 1px solid #000; */}.wrapper {/* width: 100%; */position: relative;height: 550px;background-color: #ccc;}.container {position: absolute;margin-top: 20px;width: 100%;display: flex;background-color: #ccc;}.left,.right {border: 1px solid #000;height: 530px;width: 200px;min-width: 200px;background: #fff;}.center {border: 1px solid #000;height: auto;flex-grow: 1;background: #fff;margin: 0px 20px;}.bottom-part {display: flex;align-content: flex-end;}.bottom {width: 100%;height: 50px;background: #ccc;text-align: center;line-height: 50px;}style>

效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！