what's the meaning of Flexbox? 答：The Flexible Moudle (弹性盒模型)，是一种布局模式，适用不同设备的屏幕适配。有关弹性盒子的属性传送门MDN
一、栅格系统
前端代码如何实现呢？
- 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布局就能缓解这个局面。
2016/11/23 先到这边吧。
网友评论