height: 10rem;
} </p>
<p> </style>
</head>
<body>
<h1>OMG, I’m centered</h1>
</body>
</html>
[code]</p>
<p><strong>启用Flexbox</strong></p>
<p>因为body元素包含了想要居中的标题元素，所以我们将他的display属性值设置为“flex”：</p>
<p>[code]body {
display: flex;
}
主要作用是让元素body使用flexbox布局，而不是普通的块布局。在文档流中的所有子元素（即不是绝对定位的元素）现在都变成了伸缩项目。
反向分布
复制代码
body {
display: -webkit-box;
display:-moz-box;
box-orient: vertical;
box-direction: reverse;
color: white;
}
#box1{
background: red;
height: 100px;
width: 80px;</p>
<p>}
#box2{
background: black;
height: 100px;
width: 80px;
}
#box3{
background: blue;
height: 100px;
width: 80px;
}
</style>
</head>
<body>
<div id=”box1″>1</div>
<div id=”box2″>2</div>
<div id=”box3″>3</div>
</body>
设置弹性框对齐方式
还可以指定在解析了任何灵活长度和自动页边距之后，弹性容器的内容与主轴和横轴（与主轴垂直）的对齐方式。你可以通过 justify-content、align-items、align-self 和 align-content 属性调整此对齐方式。
使用 justify-content 属性，可以设置在解析了任何灵活长度和自动页边距之后，弹性项目与弹性容器主轴的对齐方式。下图显示了 justify-content 的值以及这些值对弹性容器（含三个弹性项目）的影响。
复制代码
justify-content：flex-start(默认值) 伸缩项目向一行的起始位置靠齐。
justify-content：flex-end 伸缩项目向一行的结束位置靠齐。
justify-content：center 伸缩项目向一行的中间位置靠齐。
justify-content：space-between 伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
justify-content：space-around 伸缩项目会平均地分布在行里，两端保留一半的空间。
——————————————————————————–
align-items 侧轴对齐（适用于伸缩容器，也就是伸缩项目的父元素）
align-items 是一个和 justify-content 相呼应的属性。align-items 调整伸缩项目在侧轴上的定位方式。可能的值有：
