Day 06：专案01 - 超简单个人履历05 | CSS版面布局、Flex

昨天讲完的CSS的文字和区块属性後，今天要接续介绍版面布局的属性，以及一个非常好用的布局容器 - Flex，上完这堂课，你的网页布局就可以更加弹性罗~ 那麽，我们废话不多说，就开始今天的介绍吧!

CSS版面布局

首先，你按F12打开开发人员工具，应该会在 Elements >> Styles 滑到最底下看到这个画面(Chrome一定有，其他浏览器不确定)：

记好这个图，因为他就是CSS版面布局的概念图。

我们看这个图，发现他像箭靶一样一圈圈的包围起来，主要有三层，从外到内分别是margin、border和padding。border我们昨天已经说过了，所以接下来我只着重在介绍margin和padding这两个属性该如何使用。

margin

margin，又称外距。顾名思义就是元素外侧到其他元素或边界的距离，通常用於在两个元素间留下空间，毕竟东西都紧贴在一起也不好看对吧?

我们就用以下例子认识margin：

HTML(都同一个，之後例子我就不放了)：

<div class="outside">
    <div class="inside"></div>
</div>

CSS：

.outside {
    width: 200px;
    height: 200px;
    background-color:rgb(138, 138, 138);
    margin: 50px;
}
.inside {
    width: 100px;
    height: 100px;
    background-color:rgb(92, 92, 92);
}

显示结果为：

我们按F12打开开发者工具，点上方的红框的图示，接着将游标移动到浅灰色的方块上，就会显示如同上方的画面。

我们可以看到橘色的部分代表margin，往浅灰色的方块上下左右推了50px的空间。

另外，margin的简易写法为：

margin: 上 / 右 / 下 / 左
或 margin: 上下 / 右左

顺便分享个有趣的小诀窍，将左右margin都设为auto时，区块就会自动水平置中哦!

margin: 0px auto

padding

padding，又称内距。和margin很像，不同点在於padding是向元素内侧预留空间。通常用於避免内部元素太过贴近外侧边界。

CSS：

.outside {
    width: 200px;
    height: 200px;
    background-color:rgb(138, 138, 138);
    padding: 10px;
}
.inside {
    width: 100px;
    height: 100px;
    background-color:rgb(92, 92, 92);
}

显示结果为：

绿色的部分就是padding，浅灰色从边界向内推了10px。

padding的简易写法跟margin一样，就不多说了。

margin & padding

margin和padding是不会互相吃掉的，是什麽意思呢? 比方说我下面的例子，外容器向内推20px，内容器向外推20px，所以内外容器就隔了40px。

但是margin和margin就不同了，下面例子有两个容器，上容器往下推20px，下容器往上推20px，照理来说要隔40px才对吧? 但事实上不是，上下的margin被互相吃掉了，所以实际上只隔20px而已，这点要特别小心。

总之，margin和padding切记不要随意乱套一大堆，很容易导致版型整个跑掉，所以加入margin或padding前要很清楚自己要干什麽再去做。

CSS Flex

Flex是CSS相当方便的一个布局容器，虽然是一个比较新的技术，但大部分的浏览器都可以相容，请安心使用^^

Flex外容器和内元件

首先我们称外层的容器叫外容器，容器内的元件叫内元件，像像面的图。

在外容器加上 display: flex;，就成为Flex容器罗!

接着介绍几个外容器常见的属性：

flex-direction

预设的轴线方向。

设定主轴的方向，共有四个属性值：row、row-reverse、column、column-reverse。

flex-wrap

超出边界时是否要换行，属性值有wrap(换行)和nowrap(不换行)。

justify-content

设定主轴对齐方式。

align-items

和justify-content不同，用来设定交错轴对齐方式。

其实还有其他的属性没有讲，但这部分上网查就有了。

想了解更多可以参考这两篇文章：

• 图解：CSS Flex 属性一点也不难
• MDN-CSS弹性盒子用法

实用小工具

这里偷偷告诉你一个好用的小工具，改变左边栏位的属性值，观察看看有什麽变化吧!

另外，浏览器按F12打开开发人员介面，display: flex;後方会有一个图案，点下去之後有好几个属性选项，就可以在浏览器上预览Flex的效果了(原始码不会改变)，在开发时候非常好用!

小结

今天我们整理了CSS几个实用的排版技巧，首先是margin和padding，以及後来的Flex容器，用图形的方式希望有让你比较好理解。

CSS就在这边告一段落，接着我会实际说明个人履历的程序码，明天你就会做出专属於你的个人履历罗，千万不要错过!

如果喜欢这系列文章麻烦帮我按Like加订阅，你的支持是我创作最大的动力~

本系列文章以及范例程序码都同步更新在GitHub上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。