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

导语

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

网页布局的一些小见解

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

• 古典主义时期：使用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)

code

• align-items和align-self都是和项目在交叉轴对齐方式相关，一个是一整行，一个是单个项目；通常是容器内只有一行元素时使用其进行布局；

flex-start || flex-end || center || baseline || stretch

code

• 改变项目的宽度(flex-direction: column为高度)有flex-basis、flex-grow和flex-shrink

flex-basis功能最强大，可设置宽度的固定值或百分比；
flex-grow: 项目的伸展属性，可按比例分配项目空间，这一特性也可以结合响应式媒体查询实现响应式设计；
flex-shrink: 项目的缩放属性，空间不足时是否缩放，通常使用默认值1即可；

code

• 为项目排序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%;
    }
}

code

• 利用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;
    }
}

code

---

响应式媒体查询的一些心得

响应式媒体查询无非就是条件样式语句，怎么理解？

@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定义是否换行；
• 响应式媒体查询无非就是设定条件样式；