css3flex三分之一

CSS3的Flex布局是前端开发中的一个十分重要的技术，在很多场景下都能够方便快捷地解决布局问题。Flex布局中最常用的是三分之一布局。

.container{
display: flex;
justify-content: space-between;  /* 三分之一 */
}
.item{
flex: 1;  /* 占据全部空间 */
margin-right: 20px; /* 加上右边距 */
}
.item:last-child{
margin-right: 0; /* 去掉最后一个子元素的右边距 */
}

上述代码中的.container就是我们要进行三分之一布局的容器，我们采用Flex布局并且把justify-content属性设为space-between，这样就可以让每个子元素之间的间距保持相等。接下来我们需要为每个子元素设置占据全部空间的flex属性，然后在每个子元素之间加上20px的右边距，再去掉最后一个子元素的右边距即可完成三分之一布局。

总结来说，CSS3的Flex布局是一个非常强大的工具，可以方便地解决在前端开发中遇到的大多数布局问题，其中，三分之一布局在很多场景下都是非常实用的。

查看更多关于css3flex三分之一的详细内容...