前端提高篇（四十四）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>
效果：
