what's the meaning of Flexbox? 答：很久之前关于布局大概存在两种：流式布局，定位和浮动来解决。浮动导致的拖标，我们需要通过清除浮动来解决问题。定位啥子绝父相；但现在有了更方便的方式来处理布局的问题有关弹性盒子的属性传送门MDN
速查知识点
语法篇参考阮老师flex 教学
一、栅格系统
前端代码如何实现呢？
- grid_row定一个flex容器。
- 每一个子item节点作为flex容器中的子元素
Code：
<!--
作者：jeverson@163.com
时间：2016-11-23
描述：栅格系统
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JJExample</title>
<style type="text/css">
.grid {
border: solid 1px #e7e7e7;
}
.grid_row {
/*定义一个flex容器，每一个子item节点作为flex容器中的子元素*/
display: flex;
}
.grid_item {
/*将所有项目等宽的分布在容器中*/
flex: 1;
padding: 12px;
border: solid 1px #E7E7E7;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
</div>
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
<div class="grid_item">jj_3</div>
</div>
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
<div class="grid_item">jj_3</div>
<div class="grid_item">jj_4</div>
</div>
</div>
</body>
</html>
想折腾一个列布局，该怎么整呢？
-
so easy .grid-row样式中声明
flex-direction：coloumn - 这边对屏幕尺寸收缩到尺寸时将执行
flex-direction：row。 - code：CSS样式的设计
/*样式的设计*/
.grid {
border: solid 1px #e7e7e7;
}
.grid_row {
/*定义一个flex容器，每一个子item节点作为flex容器中的子元素*/
display: flex;
flex-direction: column;
}
.grid_item {
/*将所有项目等宽的分布在容器中*/
flex: 1;
padding: 12px;
border: solid 1px #E7E7E7;
}
@media only screen and (min-width: 480px) {
.grid_row--sm {
flex-direction: row;
}
}
@media only screen and (min-width: 720px) {
.grid_row--md {
flex-direction: row;
}
}
@media only screen and (min-width: 960px) {
.grid_row--lg {
flex-direction: row;
}
}
- 任务：一个响应式栅栏布局CSS的代码就能实现，整点事看看
嵌套栅栏如何
二、圣杯布局
圣杯布局在网页设计中非常著名，如果利用float，margin负值和最小宽度（min-width）来确保布局不冲突，以这种方式满足响应式布局的需求需要设计大量的运算，浮动清除等一些特殊手段，那么Flexbox布局就能缓解这个局面。
woshi
2016/11/23 先到这边吧。
