forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1027-css-5.html
258 lines (241 loc) · 14.7 KB
/
1027-css-5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<img src="img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo" width="20%">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>【css-05】</h2>
<h4>FLEXBOX(弹性盒布局模型)以及适用场景?</h4>
<p>分享人：孟广旭</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<h3>FLEX布局是什么？</h3>
<p>2009年，W3C提出了一种新的布局方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<h3>一，怎么运用FLEX布局</h3>
<p>flex布局非常灵活，任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局，将display属性设置为inline-flex。 还有WebKit内核的浏览器需要加上-webkit前缀。 需要注意的是设置成为flex布局之后，子元素的float，clear，text-align，vertical-align就会失效。</p>
</section>
<section>
<h3>二，基本概念</h3>
<p>采用flex布局的元素就被称为flex容器（flex contain），它的所有子元素称为flex项目（flex item）。 容器默认存在两根轴线，一根主轴（main axis）一根交叉轴（cross axis）。 项目默认沿主轴排列，单个项目占据的主轴空间叫main size，占据的交叉轴空间叫cross size.</p>
<img src="img/css-5/img1.png" width="60%">
</section>
<section>
<h3>三. FLEX-BOX容器属性</h3>
<p>flex-box(容器)和flex-item(项目)各自都有不同的属性。通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。</p>
</section>
<section>
<p style="text-align:left;">flex-box容器的主要属性有:</p>
<p style="text-align:left;">1.flex-direction 决定项目在主轴的排列方向。</p>
<p style="text-align:left;">2.flex-wrap 决定如果一条轴线排不下了，该如何换行。</p>
<p style="text-align:left;">3.flex-row 是flex-direction和wrap的简写形式，默认row nowrap。</p>
<p style="text-align:left;">4.justify-content 决定项目在主轴方向上如何对齐。</p>
<p style="text-align:left;">5.align-items 决定项目在交叉轴上如何对齐。</p>
<p style="text-align:left;">6.align-content 定义多根轴线如何对齐。</p>
</section>
<section>
<h3>FLEX-DIRECTION</h3>
<p>FLEX-DIRECTION属性决定主轴的方向（即项目的排列方向）。</p>
</section>
<section>
<p style="text-align:left;">1.flex-direction: row;表示默认值，主轴在水平方向，从左到右。</p>
<p style="text-align:left;">2.flex-direction: row-reverse;主轴在水平方向，从右到左。</p>
<p style="text-align:left;">3.flex-direction: column;主轴在垂直方向上，从上到下。 这样的话就会将原本在x轴从左向右排列的项目更改为从上到下排列。</p>
<p style="text-align:left;">4.flex-direction: column-reverse; 主轴在垂直方向上，同样的，反转一下，是从下到上。</p>
<img src="img/css-5/img2.png" width="80%">
</section>
<section>
<h3>FLEX-WRAP</h3>
<p style="text-align:left;">默认情况下，项目都排在一条线（又称"轴线"）上。FLEX-WRAP属性定义，如果一条轴线排不下，如何换行。</p>
<p style="text-align:left;">1.flex-wrap: nowrap;也是这个属性的默认值，表示不换行，项目等比例缩小（如果没规定flex-shrink为0的情况下）。</p>
<p style="text-align:left;">2.flex-wrap: wrap;表示换行，且第一行在上方。</p>
<p style="text-align:left;">3.flex-wrap: wrap-reverse;这个时候，也会换行，但是第一行就要跑到下方去了。</p>
</section>
<section>
<h3>FLEX-FLOW</h3>
<p style="text-align:left;">FLEX-FLOW属性是FLEX-DIRECTION属性和FLEX-WRAP属性的简写形式，默认值为ROW NOWRAP。</p>
<p style="text-align:left;">flex-flow: flex-direction || flex-wrap;</p>
</section>
<section>
<h3>JUSTIFY-CONTENT</h3>
<p style="text-align:left;">JUSTIFY-CONTENT属性定义了项目在主轴上的对齐方式。</p>
<p style="text-align:left;">1.flex-start: 也是这个属性的默认值，表示主轴起点对齐。</p>
<p style="text-align:left;">2.flex-end: 主轴终点对齐</p>
<p style="text-align:left;">3.center: 居中</p>
<p style="text-align:left;">4.space-between: 两端对齐，项目之间的间隔都相等。</p>
<p style="text-align:left;">5.space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
</section>
<section>
<img src="img/css-5/img3.png" width="90%">
</section>
<section>
<h3>ALIGN-ITEMS</h3>
<p style="text-align:left;">ALIGN-ITEMS属性定义项目在交叉轴上如何对齐。</p>
<p style="text-align:left;">1.flex-start: 也是这个属性的默认值，表示交叉轴起点对齐。</p>
<p style="text-align:left;">2.flex-end: 交叉轴终点对齐</p>
<p style="text-align:left;">3.center: 居中</p>
<p style="text-align:left;">4.stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度。</p>
<p style="text-align:left;">5.baseline: 项目的第一行文字的基线对齐。</p>
</section>
<section>
<img src="img/css-5/img4.png" width="90%">
</section>
<section>
<h3>ALIGN-CONTENT</h3>
<p style="text-align:left;">ALIGN-CONTENT属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<p style="text-align:left;">1.flex-start: 与交叉轴的起点对齐。</p>
<p style="text-align:left;">2.flex-end: 交叉轴终点对齐。</p>
<p style="text-align:left;">3.center: 与交叉轴的中点对齐。</p>
<p style="text-align:left;">4.space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
<p style="text-align:left;">5.space-around: 项目的第一行文字的基线对齐。</p>
<p style="text-align:left;">6.stretch(默认值): 轴线占满整个交叉轴。</p>
</section>
<section>
<img src="img/css-5/img5.png" width="90%">
</section>
<section>
<h3>四. FLEX项目属性</h3>
<p style="text-align:left;">flex项目的属性也有6个。项目的属性有:</p>
<p style="text-align:left;">1.order 决定项目的排列顺序，数值越小，排列越靠前。</p>
<p style="text-align:left;">2.flex-grow 决定项目的放大比例，默认值是0，也就是存在剩余空间，不放大。</p>
<p style="text-align:left;">3.flex-shrink 是也就是决定项目的缩小比例，默认是1，表示剩余空间不足时，等比缩小，如果需要不变，可以设置为0。</p>
<p style="text-align:left;">4.flex-basis 定义了在分配多余项目之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>
</section>
<section>
<p style="text-align:left;">5.flex 是以上三个的简写，默认0 1 auto，也就是不放大，不缩小，占据项目本来大小的主轴空间。该属性有两个快捷值: auto (1 1 auto) 和 none (0 0 auto)，这里也不过多赘述。</p>
<p style="text-align:left;">6.align-self属性 默认auto，继承flex容器，也就是父元素的align-items属性，项目和algn-items一样，只是决定单个item对交叉轴的对齐方式。</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<h3>display:flex可以复合使用吗？</h3>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>答案是可以的，一个元素可以是一个display的子元素同时也是另外一个display的父元素。</p>
</section>
</section>
<section>
<section>
<h3>5.代码实战</h3>
</section>
<section>
<h3>demo</h3>
</section>
</section>
<section>
<section>
<h3>6.拓展思考</h3>
</section>
<section>
<h3>FLEX布局的常用场景</h3>
</section>
<section>
<p>垂直居中，处于中心，以及左中右三块布局</p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">flexFlex 布局教程: 语法篇--阮一峰的个人博客</a><br>
<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html">flexFlex 布局教程: 实例篇--阮一峰的个人博客</a>
</section>
</section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 孟广旭</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>