先说一下总结把
12.20的导航作业 一开始觉得挺难的 然后第一次做的时候不知道谁和谁定位，然后自己看了别的同学的代码做参考 定位不准确 然后就是在浏览器审查元素中添加 样式 来看看效果 ， 现在可以用，但是还是欠佳
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> .container{ border: 1px dashed; /*只要加了padding border 必须要加box-sizing*/ box-sizing: border-box; background-color: #b3d4fc; } .item{ width: 100px; height: 50px; background-color: #63a35c; border: 1px red dashed; } .container{ /*转为弹性盒子*/ display: flex; /*子元素全部转为行内块元素，水平排列可以设置宽和高*/ } .container{ /*1设置容器中的主轴方向* 水平 垂直 */ /*flex-direction: row;*/ /*flex-direction: column;*/ /*2是否允许创建多个容器 一行排不下 是否允许换行显示*/ /*不允许换行*/ /*flex-wrap: nowrap;*/ /*允许换行*/ /*flex-wrap: wrap;*/ /*3 flex-flow是上面两个的简写 第一个是主轴的方向 第二个是是否换行显示*/ flex-flow: row wrap; /*4设置容器中的项目在主轴上的对齐方式 左对齐 右对齐 居中对齐*/ /*justify-content: flex-start;*/ /*justify-content: flex-end;*/ /*justify-content: center;*/ /*分配主轴上的剩余空间 两端对齐 分散对齐 平均对齐*/ /*justify-content: space-between;*/ /*justify-content: space-around;*/ justify-content: space-evenly; /*5项目在交叉轴上的排列方式*/ height: 200px; /*在上部显示*/ /*align-items: flex-start;*/ /*在底部显示*/ /*align-items: flex-end;*/ /*在居中显示*/ /*align-items: center;*/ /*6设置项目在多行容器交叉轴上的对齐方式*/ /*两端对齐*/ /*align-content: space-between;*/ /*分散对齐*/ /*align-content: space-around;*/ /*平均对齐*/ align-content: space-evenly; } </style></head><body> <div class="container"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> <span class="item">7</span><!-- <span class="item">8</span>--><!-- <span class="item">9</span>--><!-- <span class="item">10</span>--><!-- <span class="item">11</span>--> </div></body></html>
