一、手写flex容器的6个属性以及功能
二、flex容器属性案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.container{
height: 300px;
border: 1px dashed;
/定义某个区域的固定元素/
box-sizing: border-box;
background-color:lightgrey;
}
.item{
width: 100px;
height:100px;
border: 1px dashed;
background-color: wheat;
}
.container{
display: flex;
}
.container{
/flex-direction: row;水平显示/
/flex-direction: column;垂直显示/
/flex-direction: column-reverse;与column相反的垂直显示/
/与row相反的水平显示/
/flex-direction: row-reverse;/
/多行容器/
/不创建
flex-wrap: nowrap;/
/创建/
/flex-wrap: wrap;/
/主轴方向和多行容器的间歇/
flex-flow: row nowrap;
/项目在主轴上的对齐方式/
/开始端对齐/
/justify-content: flex-start;/
/结束端对齐/
/justify-content: flex-end;/
/中间对齐/
/justify-content: center;/
/分配主轴上的剩余空间/
/两端对齐/
/justify-content: space-between;/
/分散对齐/
/justify-content: space-around;/
/平均对齐/
justify-content: space-evenly;
/在交叉轴上的排列方式/
/开始端对齐/
/align-items: flex-start;/
/结束端对齐/
/align-items: flex-end;/
/中间对齐/
/align-items: center;/
/在多容器交叉轴上的对齐方式/
/两端对齐/
/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>
</div>
</body>
</html>
三、1220作业体会
对浮动和定位运用还是会出现定位不准确等问题，在相对定位和绝对定位方面还是会存在子元素定位不精确的问题，比如：绝对定位是相当于谁进行的绝对定位，绝对定位的父级元素是html还是其他的标签。对于排版方面欠缺，后期需要加强排版方面的练习。