初学者flex布局的个人尝试

来源：互联网发布：炉石淘宝买友谊赛值吗编辑：程序博客网时间：2024/06/07 22:08

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>

效果图如下：

当只布局单主轴的时候，用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的时候在前面说的基础之上进行空间分配；

请多指教，特别是主轴方向上盒子空间的不规律分配上有见解的可以告诉我，不胜感激！

0 0