flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。

设定主轴方向flex-direction：(1)默认row，主轴为水平方向，起点在左边。(2)row-reverse主轴为水平方向，起点在右边。(3)主轴为垂直方向，起点在上面。(4)主轴为垂直方向，起点在下面。

在开展PC网站建设实验期间，我积累了不少珍贵的经验和深刻的体会。从对网站的整体布局到每个细节的落实，都耗费了我不少心血和毅力。接下来，我将从多个角度与大家分享我的实验体会。

规划的重要性

建设网站，规划至关重要，是首要且关键的一环。在着手实施之前，我首先确定了网站的目标群体和主题走向。比如，若是为年轻人打造的时尚网站，内容与风格就得紧跟时代潮流。接着，我对网站的各项功能模块进行了精心设计，包括首页、产品展示页、用户互动区等，这样的明确规划有助于后续工作的有序进行，避免盲目。

一、Flex 布局简介

咱来说说 Flex 布局哈，这就是弹性盒子布局，是 CSS3 里一种特厉害的布局办法。它能轻轻松松弄出各种复杂的布局效果，让元素变得有弹性，能适应不同的页面大小还有设备。IE10 以及更高的版本支持它，在移动端和那些现代浏览器里可流行啦。

Flex 布局意思就是 “弹性布局”，能给盒状模型提供最大的灵活性。随便哪个容器都能指定成 Flex 布局，行内元素也行。得注意哈，设成 Flex 布局以后，子元素的 float、clear 还有 vertical-align 属性就没用啦。

CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。

接下来我们将了解下 CSS Grid 及其工作原理。了解下它如何使用。

1. 简介

1.1 什么是CSS布局？

what's BFC?

第一次看到这个名词，我是拒绝的，css什么时候还有这个东西？于是迫不及待的google了一下，才发现原来它无时无刻不在我们的css当中，只不过它并不是一个属性，不需要我们平常使用手写罢了。但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局。 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

现在的企业网站制作前端都是div+css布局。 TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的企业网站制作都是用DIV+CSS布局。

什么是DIV？
　　DIV是层叠样式表中的定位技术，全称DIVision或叫做划分。在网站制作中DIV元素一般是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。当使用DIV+CSS布局的时候， 主要把它当做盒子然后把需要的文字，图像等内容放在DIV标签之中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”，或者直接就叫一段在 DIV 中的 HTML。

CSS 布局是指使用 CSS 来控制页面元素在页面上的位置和排列。CSS 提供了多种布局方式，可以满足不同的需求。

传统布局方式

1 简介

上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。