前端小白学习纪实之flex布局
#博学谷it学习技术支持#
第二弹了哦
这是学习前端的第二阶段了，还是没有进入JavaScript的学习，这个阶段主要的学习还是css3的学习，就是上次我们聊到的进行渲染的那个工具，就像是一个美术画笔一样，他会帮助你将你先用HTML写出来的比较丑的框架进行美化
css3是啥
比如我们想要实现一个动画的效果，直接用我们的html这个工具没法实现，或者实现起来比较困难，那么我们就需要用到我们css这个工具了，那我们的css工具经过这些年的沉淀和发展，他也会慢慢的丰富起来，也会慢慢的方便起来，慢慢衍生出css2，css3，可能以后还会有css4这些等等，都是为了敲代码更方便，更快捷，实现的需求更多元化，更快捷化。
简单举一个例子吧----flex布局
展开详细来说，首先就是我们HTML写出来的东西就像是一个个大小不一的盒子，当然盒子里的东西也可以直接在html里面进行填充，那么这些盒子要出现在我们的网页上，我们的显示屏就这么大，这些盒子要怎么排列，从上到下，还是从左到右，斜着排还是一个挨着一个排，我们用什么控制呢，就是这个flex布局。
具体代码
刚开始我们写出来的盒子人家当然会给一个默认的排列，默认的排列就是从上到下，一行放一个盒子（这里的盒子学名叫做块级元素），盒子1在第一行第一个，盒子2在第二行第一个。那现在我们需要盒子2排到第一行第二个，要怎么做呢，那就需要你添加上flex布局的代码了，就是display-flex这个代码，那问题又来了，这个代码我有了，我把它添加到哪里去呀，随便写一个地方行不行，会不会生效，答案当然是不行了
代码往哪里写：
不同的代码需要写在不同的地方，会有不同的效果，这都是有区别的，这也是新手目前学起来比较头疼的地方，就是我好不容易把这个代码记住了，我又不知道他写在什么地方，写上去了，又不知道会产生什么效果，这就是一个完整的链条。首先你需要记住代码，然后你需要知道这个代码代表什么，会产生什么样的效果，然后还要找准添加的位置，这样才算完整的学会这部分代码了
再说回来哈
刚才的display-flex这个代码需要添加的位置就是盒子1和盒子2的爸爸那个，就像是俄罗斯套娃一样，你要找到盒子1和盒子2都套在哪个盒子里，然后把这个代码添加到这个爸爸盒子上去，这样才会生效，当然这只是最简单的生效了，那你想让他效果更好，比如我不光想让盒子1和盒子2排在一行上，我还想让他们中间有空隙，我还想让这两个盒子垂直居中等等，这些效果对应的代码又都不一样了，你需要记住代码，找准位置，添加上去，实现效果。
