布局的概念
之前写前端，如果没有一个布局的概念的花，那你的网页就会写的很混乱。所以在设计网页之初就应该想好。这个网页整体应该是什么样子的。布局就和word中的排版差不多，就是让你的网页好看，清晰。一般布局我用过以下三种
- table布局
- bootstra的栅格布局
- 今天刚学的flex布局
table的布局应该是基础中的基础，只要将表格的边线变为透明，那么你的布局就会转化为一个一个的单元格，但是这种技术的缺陷在于，一旦你要使用table标签创建一个表格的话，那么你的代码将会写的很乱很难看，非常不利于维护。
bootartap的自带的栅格布局是一个很强大的布局系统，使用好的话，可以很轻松的排列你的div，而且是响应式布局。一般写法如下
<div class="row">
<div class="col-md-4">11</div>
<div class="col-md-4">22</div>
<div class="col-md-4">33</div>
</div>
那么11，22，33，就排列在一行上面了。但是这种写法会带来很多div，嵌套很多div，导致你的代码很长。要是你使用的编辑器比较落后，很难定位具体某个div。接下来的这种事flex布局
布局的类型
说完了布局使用的相关技术后，选座来说一下布局的概念。一般的的布局有以下三种类型。
- 上中下布局
| 上（header） |
|---|
| 中 （content） |
| 下（footer） |
这种布局很常见，知乎，简书基本都是这样的，上部是header也就是标题栏，中不是内容，下部一般写一些网站的备案啊之类的。
- 双栏布局
| 侧边栏（sider） | 内容 (content) |
|---|
这种布局一般是用于管理系统，左边有一个侧边栏可以切换不同的管理功能。
使用flex布局
首先先上一张从其他网站拷过来的图
flex的属性图
这张图涵盖了基本的flex属性，下面，我们一个一个来介绍它的属性，首先，先理解几个概念
容器
容器就是承载flex的标签，如果一个div想要使用flex布局，你就得这么写
<div style="display: flex">这是一个flex容器</div>
那么这个div就是一个flex容器，如果这个div中再嵌套一个有flex属性的div那么这两个div就是父容器和子容器的关系
<div style="display: flex">
这是一个父容器
<div style="display: flex">这是子容器</div>
</div>
父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
轴
- 主轴
justify-content决定了其排列方向 - 交叉轴
align-items决定了其排列方向
一般来说主轴是指水平方向的轴，交叉轴是指垂直方向的轴。但是flex-direction这个属性，决定了主轴的方向，而交叉轴就是主轴旋转90度所得到的轴。所以主轴是根据flex-direction属性决定而交叉轴根据主轴来决定。
flex-direction
属性有 row 和 column 分别表示横向排列和纵向排列
flex-wrap
属性有wrap和nowrap，分别表示换行和不换行。
网友评论