<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/*兼容写法*/
/*display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;*/
*{
margin: 0;
padding: 0;
}
</style>
<body>
<style type="text/css">
/*单项目*/
.box{
width: 100%;
height: 80px;
border: 1px solid #000;
display: flex;/*必须属性*/
justify-content: space-between;/*设置项目的对齐方式，就能实水平方式对齐。*/
align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/
}
.item{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
}
/*双项目*/
.box1{
width: 100%;
height: 120px;
border: 1px solid #000;
display: flex;/*必须属性*/
justify-content: center;/*设置项目的对齐方式，就能实水平方式对齐。*/
align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/
flex-direction: column;
}
.item1{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
}
.item1:nth-child(2) {
align-self: flex-end;/*某个弹性对象的对齐方式*/
}
.box2 {
width: 100%;
height: 120px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
align-content: space-between;
/*flex-wrap: wrap;*/ /*超出是否换行*/
}
.column2 {
flex-basis: 100%;/*初始化宽度*/
display: flex;
justify-content: space-between;
}
.item2{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
}
</style>
<!-- --------------------骰子的布局----------------- -->
<!-- 单项目 -->
<div class="box">
<span class="item"></span>
</div>
<!-- 双项目 -->
<div class="box1">
<span class="item1"></span>
<span class="item1"></span>
</div>
<!-- 四项目 -->
<div class="box2">
<div class="column2">
<span class="item2"></span>
<span class="item2"></span>
</div>
<div class="column2">
<span class="item2"></span>
<span class="item2"></span>
</div>
</div>
<!-- ----------------------网格布局------------------- -->
<style type="text/css">
body{
/*overflow: hidden;*/
}
.Grid{
display: flex;
justify-content:center;
}
.Grid-cell{
border: 1px solid red;
height: 80px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
/*flex 属性是 flex-grow:元素的宽度为其他元素的多少倍宽、flex-shrink：元素收缩到其他元素的多少分之几 和 flex-basis：初始化宽度， 属性的简写属性,让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容*/
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
.item{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
}
</style>
<div class="Grid">
<div class="Grid-cell u-1of4">
<span class="item"></span>
</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
</body>
</html>
