导语
这篇文章不是弹性布局和响应式布局的语法教程，而是小羊在学习上述两种布局时的一点心得体会，所以建议各位看官舍得浪费时间看这篇文章之前，对弹性布局和响应式布局有一定了解，如果还没有了解，我在下面一节给出我在学习时所用的学习资料，以供童鞋们借鉴；
网页布局的一些小见解
以小羊目前掌握的知识范畴，网页布局大致经历了个阶段，我融入了自己的理解：
- 古典主义时期：使用table元素进行布局，当时CSS功能特性还不是十分强大，所以用table元素（原本是制作表格的）进行布局，违背了HTML语义化的规范；
- 新古典主义时期：Box-Model+Position+Float实现布局，至今仍然使用，兼容性最好；
- 现代主义时期：Flex布局+Responsive Design+grid，随着移动互联网的高潮迭起催生了Flex和响应式布局技术，Flex比较使用与简单的线性布局，于是适应大型网站开发的grid布局又应运而生；
- 后现代主义时期：待续......
网页布局是们宏大精深的叙述主题，日后小羊会单独开章节叙述；
flex布局和响应式布局的学习资料
-
阮一峰老师的FLex布局教程
涵盖了语法篇和实战篇，很好的入门中文资料； - Flexbox的坑
-
极简响应式查询
这是小羊参考MDN等学习资料的总结，抠取响应式查询的核心知识点，快速入门；
flex布局的一些学习笔记
相信童鞋们已经看完阮一峰的教程，并且做了骰子demo；
但是看到那么多的属性，不免头大，小羊在此做一下不成熟的知识梳理：
- 弹性盒模型是核心，主轴是一切元素主方向的布局关键，交叉轴是一切元素相对于主轴的交叉方向的布局关键；
【注】切记主轴不一定是水平方向，使用flex-direction: column那么主轴就是垂直方向了； - 总的来看，容器6个属性，项目也6个属性，剔除简写的flex-flow和flex(初学不建议使用简写)，也就10个属性；
- 和项目总体布局相
justify-content和align-content具有相同的属性：
justify-content相当于移动每一个项目的交叉轴
align-content相当于移动同在一行项目的主轴
flex-start || flex-end || center || space-between || space-around || (stretch)
-
align-items和align-self都是和项目在交叉轴对齐方式相关，一个是一整行，一个是单个项目；通常是容器内只有一行元素时使用其进行布局；
flex-start || flex-end || center || baseline || stretch
- 改变项目的宽度(flex-direction: column为高度)有
flex-basis、flex-grow和flex-shrink
flex-basis功能最强大，可设置宽度的固定值或百分比；
flex-grow: 项目的伸展属性，可按比例分配项目空间，这一特性也可以结合响应式媒体查询实现响应式设计；
flex-shrink: 项目的缩放属性，空间不足时是否缩放，通常使用默认值1即可；
- 为项目排序
order，有时候在响应式设计时需要在不同设备下微调项目顺序，order可以较好实现
code -
flex-direction看后面的实例明白用处即可，flex-wrap暂时没有遇到具体业务场景，暂且搁置；
** 三栏布局为例**
- 利用
flex-grow动态占据父元素空间
以往三栏布局需要设置浮动和清除浮动
<div class="normal-box">
<div class="normal-item">1</div>
<div class="normal-item">2</div>
<div class="normal-item">3</div>
</div>
.normal-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
width: 300px;
overflow: hidden;
}
.normal-item{
box-sizing: border-box;
float: left;
width: 33.33%;
height: 50px;
border: 1px solid red;
}
去掉一个item，在清除的位置会“留白”，得重新设置元素的宽度；
normal-box
使用flex-box后，只要给flex-item设置flex-grow: 1的属性，那么元素就可以动态变宽；
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
<div class="flex-box">
<div class="flex-item">1</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
width: 300px;
}
.flex-item{
flex-grow: 1;
width: 100px;
height: 50px;
border: 1px solid red;
}
flex-box
code
- 利用
flex-basis比例化分配元素宽度
上面的多栏布局，我们为元素设置固定宽度，实际可以通过flex-basis: x%为元素设置百分比宽度；
<div class="flex-box flex-box-1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-box flex-box-2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
width: 600px;
}
.flex-item{
width: 100px;
height: 50px;
border: 1px solid red;
}
.flex-box-1{
.flex-item:first-child{
flex-basis: 20%;
}
.flex-item:nth-child(2){
flex-basis: 60%
}
.flex-item:last-child{
flex-basis: 20%;
}
}
.flex-box-2{
.flex-item:first-child{
flex-basis: 50%;
}
.flex-item:last-child{
flex-basis: 50%;
}
}
- 利用
flex-direction实现元素的响应式布局
用过Bootstap框架的童鞋都知道，nav组件有一行布局和堆叠布局两种，可以利用flex-direction的特性实现这种效果；
<div class="flex-box flex-box-1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
flex-warp: wrap;
}
.flex-item{
flex-basis: 33.33%;
height: 50px;
border: 1px solid red;
}
@media (max-width:768px){
.flex-box{
flex-direction: column;
}
}
响应式媒体查询的一些心得
响应式媒体查询无非就是条件样式语句，怎么理解？
@media (min-width:768px) and (max-width: 992px){
//条件样式...
}
就是在不同设备条件（宽度或高度，设备类型，摆放方向等）去设置特定样式；
总结：
- 关于flex语法可以归纳为10个属性；
- justify-content和align-content可以改变项目的主轴或交叉轴的位置；
- align-items和align-self可以改变一行项目或单个项目在交叉轴的对齐方式；
- flex-basis、flex-grow和flex-shrink可以改变项目的尺寸；
- order改变项目的排序；
- flex-direction改变项目组的方向，flex-wrap定义是否换行；
- 响应式媒体查询无非就是设定条件样式；
