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