概述
flex布局
flex布局我想达到的几种情况，进行分析：
1.最简单的：flex布局使一个主轴盒子排列，并且能够控制盒子的位置，制作类似于导航栏的页面。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 100%;
height: 200px;
background-color: #dddddd;
display:flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: #ff0000;
}
.son:first-child{
/*margin-top: 20px;*/
position: absolute;
float: left;
left: 0;
top:0;
/*padding: 20px;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 100%;
height: 200px;
background-color: #dddddd;
display:flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: #ff0000;
}
.son:first-child{
/*margin-top: 20px;*/
position: absolute;
float: left;
left: 0;
top:0;
/*padding: 20px;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
当只布局单主轴的时候，用justify-content定一整行盒子的主轴方向的位置；用align-items订侧轴方向的位置。
水平方向的微调，在单个项目中使用margin；（改变margin并不是从现在的位置进行简单平移，而是再一次的进行空间分配）垂直方向的微调，在单个项目中使用align-self；（文中未进行展示）
同时可以使用绝对定位脱离整个flex布局，进行进一步的布局；（会改变原有的flex布局，空间会重新进行分配，因为少了一个盒子）
使用浮动，一点效果也没有；
感想：显然，这个结果并不能让人满意，水平方向大多不会很规整的布局，如果使用margin进行二次调剂，几乎是不太可能的，要列出多元多次函数，肯定很费劲。
总结：在主轴方向上，如果盒子的间距十分规律或者位置很特殊，flex会十分方便；但是他最厉害的还是对于主轴剩余空间的分配。
2.多行flex布局。
多行flex布局有两种情况：一种是一行的主轴元素超过了main-size，另外一种是用盒子包裹你想让成为一行的盒子，然后宽度撑满即可。
多行flex很少会用到，没有贴实例。
值得注意的是：经过实验，发现align-content在不为stretch的时候，align-items不起任何作用；
而align-content为stretch的时候，每行主轴的侧轴空间会被平配；align-items在center，flex-end的时候在前面说的基础之上进行空间分配；
请多指教，特别是主轴方向上盒子空间的不规律分配上有见解的可以告诉我，不胜感激！
最后
以上就是积极信封为你收集整理的初学者flex布局的个人尝试flex布局的全部内容，希望文章能够帮你解决初学者flex布局的个人尝试flex布局所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复