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

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，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌

我是left

我是center

.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;

}