关于flexd性布局子元素添加padding问题

在使用flex布局时，如果直接为子级元素添加padding的话，其宽度会压迫其他兄弟元素的空间。如以下布局。

本意是设置一个d性布局，然后每个子元素各占三分之一，然后第二个元素设置一个向右的padding值。但由于第二个子元素添加了padding: 60px的内边距导致其余两个兄弟元素的宽度受到压挤，效果如下：

而flex布局的盒模型box-sizing是content-box,是不包含内边距的。也就是第二个子元素设定的padding-right要先从father里减去。则分到每个子元素的宽度是 px。第二个子元素的宽度要加上60，所有最终分配的宽度就如上图所示了。

解决这个问题有两个办法

1.子元素内加一个标签包裹d性内容。在内标签中再设置padding值。但这样的话html层级加深且语义不明显，不推荐此方法。

2.将需要添加padding的子元素的box-sizing设置为border-box，同时显式的声明flex属性。即（ flex: 33.33% 1 1 ）

其实像如题这种情况，采用grid网格布局是一个更明智的选择。

参考

深入理解 css3 中的 flex-grow、flex-shrink、flex-basic

有关flex布局子项padding问题

1.首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。

2.然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。

3.通过value属性我们可以获得用户在input中输入的内容，如下图所示。

4.下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。

5.创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。

6.接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。

7.最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。

---