yuwen1687#yuwen1687.github.io#2017-06-14-Flex布局实例1

--- layout: post title: Flex布局实例 date: 2017-06-14 17:05:00 +0800 categories: 前端 tag: flex --- * content {:toc} 根据之前看的flex布局的语法，结合网上的实例教程，写了几个骰子的布局（实例来自阮一峰的网络日志Flex布局教程:实例篇）。 在上面的代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目，如果有多个项目，就要添加多个span元素。 ### 单项目  .box{ display:flex; }  .box{ display:flex; justify-content:center; }  .box{ display:flex; justify-content:flex-end; }  .box{ display:flex; align-items:center; }  .box{ display:flex; align-items:center; justify-content:center; }  .box{ display:flex; align-items:flex-end: justify-content:center; }  .box{ display:flex; align-items:flex-end; justify-content:flex-end; } ### 双项目  .box{ dis