效果（下图）
实现代码：
<!--html--> <div class="wrap"> <div class="content">这是子盒子</div> </div> //css .wrap { display: flex; width: 300px; height: 300px; background-color: #ccc; justify-content: center;//子盒子位于现在的位置 //justify-content: flex-start;子盒子位于现在的位置 的左边 //justify-content: flex-end;子盒子位于现在的位置 的右边 } .content { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: orange; }
效果（如下图）
<!--html--> <div class="wrap"> <div class="content">这是子盒子</div> </div> //css .wrap { display: flex; width: 300px; height: 300px; background-color: #ccc; } .content { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: orange; align-self: center;//位于上图中现在的位置 //align-self: flex-start;位于上图中现在的位置 的上方 //align-self: flex-end;位于上图中现在的位置 的下方 }
//用于父元素 justify-content: center | flex-start | flex-end;// 中 左 右 三个位置 //用于子元素 align-self: center | flex-start | flex-end;// 中 上 下 三个位置 //两个属性相互结合，就可以做到很多布局
转化成flex的元素的子元素默认是排在一行的
flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*css*/ .wrap{ width:600px; height:300px; display:flex; background-color: #ccc; } .wrap div{ width:25%; height: 150px; box-sizing: border-box; line-height: 150px; text-align: center; border: 1px solid blue; } </style> </head> <body> <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
上面代码的效果图（默认不换行）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*css*/ .wrap{ width:600px; height:300px; display:flex; background-color: #ccc; flex-wrap: wrap; } .wrap div{ width:25%; height: 150px; box-sizing: border-box; line-height: 150px; text-align: center; border: 1px solid blue; } </style> </head> <body> <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
上面代码的效果图（换行-在下方）
以后有在了解的再补上
