[css] flex wrap 九宫格布局

本文主要是介绍[css] flex wrap 九宫格布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div class="box"><ul class="box-inner"><li>九宫格1</li><li>九宫格2</li><li>九宫格3</li><li>九宫格4</li><li>九宫格5</li><li>九宫格6</li><li>九宫格7</li><li>九宫格8</li><li>九宫格9</li></ul>
</div>

.box {position: relative;width: 100%;height: 600px;
}
.box-inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex; // 重点flex-wrap: wrap; // 重点
}
.box-inner > li {overflow: hidden;flex-grow: 1;background-color: darkorange;text-align: center;color: #ffffff;width: 33%; // 重点height: 200px;line-height: 200px;margin: 1px;text-align: center;
}

CSS九宫格布局

这篇关于[css] flex wrap 九宫格布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---