先说一下总结把
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>