移动端开发系列——flex和响应式布局

这篇文章不是弹性布局和响应式布局的语法教程，而是小羊在学习上述两种布局时的一点心得体会，所以建议各位看官舍得浪费时间看这篇文章之前，对弹性布局和响应式布局有一定了解，如果还没有了解，我在下面一节给出我在学习时所用的学习资料，以供童鞋们借鉴；

网页布局的一些小见解

以小羊目前掌握的知识范畴，网页布局大致经历了个阶段，我融入了自己的理解：

flex布局和响应式布局的学习资料

flex布局的一些学习笔记

相信童鞋们已经看完阮一峰的教程，并且做了骰子demo；
但是看到那么多的属性，不免头大，小羊在此做一下不成熟的知识梳理：

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可以较好实现

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>
.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，在清除的位置会“留白”，得重新设置元素的宽度；
使用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 class="flex-box">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
<div class="flex-box">
  <div class="flex-item">1</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-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>
.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定义是否换行；
响应式媒体查询无非就是设定条件样式；