网页编辑器
浏览器（具有调试功能）
CSS3弹性盒子justify-content（内容对齐）属性应用在弹性容器上，把弹性项（子元素）沿着弹性容器的主轴线（main axis）对齐。justify-content 语法：justify-content: flex-start | flex-end | center | space-between | space-aroundflex-start：默认值，弹性子元素向行头紧挨着填充。例子：css部分：.father1{ width:500px; height:400px; background: slategrey; margin:20px auto; display: -webkit-flex; display:flex; -webkit-justify-content: flex-start; justify-content: flex-start; } .son1{ width:100px; height:100px; border:2px solid darkslategray; background: darkseagreen; margin:10px; line-height: 100px; text-align: center; color: #fff; }html部分：
justify-content：flex-end；弹性子元素向行尾紧挨着填充。第一个弹性子元素的main-end外边距边线被放置在该行的main-end边线，而后续弹性子元素依次平齐摆放。例子：css部分：.father2{ width:500px; height:400px; background: slategrey; margin:20px auto; display: -webkit-flex; display:flex; -webkit-justify-content: flex-end; justify-content: flex-end; } .son2{ width:100px; height:100px; border:2px solid darkslategray; background: darkseagreen; margin:10px; line-height: 100px; text-align: center; color: #fff; }html部分:
justify-content：center；弹性项目居中紧挨着填充。但是如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出。例子：css部分： .father3{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-justify-content: center; justify-content: center; } .son3{ width:100px; height:100px; border:2px solid crimson; background: coral; margin:10px; line-height: 100px; text-align: center; color: #fff; }html部分：
justify-content：space-between；弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。例子：css部分：.father4{ width:500px; height:400px; background: midnightblue; margin:20px auto; display: -webkit-flex; display:flex; -webkit-justify-content: space-between; justify-content: space-between; } .son4{ width:100px; height:100px; border:2px solid darkblue; background: cornflowerblue; margin:10px; text-align: center; color: #fff; }html部分：
注意浏览器的兼容性
希望小编分享的原创经验对好伙伴们有所帮助，如果小伙伴们有对本经验有任何疑问，请在下方评论处留言讨论，小编第一时间来解答！