CSS3 如何实现标签宽度按权等分_css平分宽度

类似于导航栏类的标签通常会涉及到宽度等分的问题，一些比较好等分的类似四个五个六个这样的按百分比为单位就可以的，但是遇到三等分七等分这种的用百分比就很难等分了，这里介绍css3的一个flex的属性，父级元素用display：flex；布局，子集元素用flex：1；均分父级元素，这样就可以达到完美的等分效果了，具体代码如下：
html代码：

<ul id="father">
<li class="children">第一个</li>
<li class="children">第二个</li>
<li class="children">第三个</li>
</ul>
1
2
3
4
5

css代码：

#father{
  display:flex;
  width:100%;
  height:10rem;
}
.children{
  flex:1;
  text-align:center;
}
1
2
3
4
5
6
7
8
9

这里要注意的是flex是等分父级元素的宽度，要实现等分，首先得保证这些标签元素在同一父级标签元素下面，当然，flex后面的值不一定非要是1，若是要让不同的子标签占不同的比重，填上相应的权值即可。