├── README.md
├── LICENSE
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # flex-box-demo Flex 布局示例
2 |
3 | > 感谢阮一峰老师的教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
4 |
5 | 本示例将教程上所有的布局都简单的实现了一遍，预览地址：http://static.vgee.cn/static/index.html
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 JailBreak
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 20px;
3 | margin: 0 auto;
4 | background-color: #E2E2E2;
5 | max-width: 1024px;
6 | color: #595B66;
7 | font-family: 'Microsoft Yahei', sans-serif;
8 | }
9 | h1,h2,h3,h4 {
10 | color: #797979;
11 | // border-bottom: solid 1px #797979;
12 | padding: 5px 0;
13 | }
14 | h1, h2 {
15 | border-bottom: solid 2px #797979;
16 | }
17 | p {
18 | font-size: 15px;
19 | background: #797979;
20 | padding: 10px;
21 | border-radius: 5px;
22 | color: white;
23 | line-height: 2;
24 | }
25 | a {
26 | color: #FFD200;
27 | }
28 | .box {
29 | background-color: white;
30 | margin: 0 0 55px;
31 | display: flex;
32 |
33 | }
34 | .box-tall {
35 | height: 800px;
36 | }
37 | .box-item {
38 | width: 200px;
39 | height: 200px;
40 | line-height: 200px;
41 | vertical-align: middle;
42 | margin: 5px;
43 | background-color: #ffd200;
44 | font-size: 100px;
45 | color: white;
46 | text-align: center;
47 | }
48 | .item-tall {
49 | height: 400px;
50 | line-height: 400px;
51 | }
52 |
53 |
54 | .box-1 {
55 | flex-direction: row;
56 | }
57 |
58 | .box-2 {
59 | flex-direction: row;
60 | flex-wrap: nowrap;
61 | }
62 |
63 | .box-3 {
64 | flex-direction: row;
65 | flex-wrap: wrap;
66 | }
67 |
68 | .box-4 {
69 | flex-direction: row;
70 | flex-wrap: wrap-reverse;
71 | }
72 |
73 | .box-5 {
74 | flex-flow: row nowrap;
75 | }
76 |
77 | .box-6 {
78 | justify-content: flex-start;
79 | }
80 | .box-7 {
81 | justify-content: flex-end;
82 | }
83 | .box-8 {
84 | justify-content: center;
85 | }
86 | .box-9 {
87 | justify-content: space-between;
88 | }
89 | .box-10 {
90 | justify-content: space-around;
91 | }
92 |
93 | .box-11 {
94 | align-items: flex-start;
95 | }
96 | .box-12 {
97 | align-items: flex-end;
98 | }
99 | .box-13 {
100 | align-items: center;
101 | }
102 | .box-14 {
103 | align-items: baseline;
104 | }
105 | .box-14 .box-item{
106 | font-size: 88px;
107 | line-height: initial;
108 | text-decoration: underline;
109 | }
110 | .box-14 .item-tall{
111 | font-size: 122px;
112 | line-height: initial;
113 | }
114 | .box-15 {
115 | align-items: stretch;
116 | }
117 | .box-15 .box-item {
118 | height: auto;
119 | }
120 |
121 | .box-16 {
122 | flex-wrap: wrap;
123 | align-content: flex-start;
124 | }
125 | .box-17 {
126 | flex-wrap: wrap;
127 | align-content: flex-end;
128 | }
129 | .box-18 {
130 | flex-wrap: wrap;
131 | align-content: center;
132 | }
133 | .box-19 {
134 | flex-wrap: wrap;
135 | align-content: space-between
136 | }
137 | .box-20 {
138 | flex-wrap: wrap;
139 | align-content: space-around;
140 | }
141 | .box-21 {
142 | flex-wrap: wrap;
143 | align-content: stretch;
144 | }
145 | .box-21 .box-item {
146 | height: auto;
147 | }
148 |
149 | .box-22 .order {
150 | order: -1;
151 | }
152 | .box-item div{
153 | font-size: 14px;
154 | position: relative;
155 | top: -150px;
156 | }
157 |
158 | .box-23 .box-item{
159 | flex-grow: 1;
160 | width: auto;
161 | }
162 | .box-23 .grow-2 {
163 | flex-grow: 2;
164 | }
165 |
166 | .box-24 .box-item {
167 | width: 400px;
168 | }
169 | .box-24 .shrink{
170 | flex-shrink: 0;
171 | }
172 |
173 | .box-25 .box-item {
174 | flex-basis: 200px;
175 | width: 400px; // width 将失去作用
176 | }
177 |
178 | .box-26 {
179 | height: 400px;
180 | }
181 | .box-26 .box-item {
182 | align-self: flex-start;
183 | }
184 | .box-26 .end {
185 | align-self: flex-end;
186 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Flex 布局示例
6 |
7 |
8 |
9 | Flex 布局示例
10 | 感谢阮一峰老师的教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
11 |
本示例将教程上所有的布局都简单的实现了一遍，并保存GitHub上面
12 |
https://github.com/JailBreakC/flex-box-demo
13 | 容器的属性
14 | 1、flex-direction属性
15 | flex-direction属性决定主轴的方向（即项目的排列方向）。
16 |
17 | .box {
18 | flex-direction: row | row-reverse | column | column-reverse;
19 | }
20 |
21 |
22 |
1
23 |
2
24 |
3
25 |
4
26 |
2、flex-wrap属性
29 | 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
30 |
31 | .box{
32 | flex-wrap: nowrap | wrap | wrap-reverse;
33 | }
34 |
35 | nowrap（默认）：不换行。
36 |
37 |
1
38 |
2
39 |
3
40 |
4
41 |
5
42 |
6
43 |
7
44 |
wrap：换行，第一行在上方。
46 |
47 |
1
48 |
2
49 |
3
50 |
4
51 |
5
52 |
6
53 |
7
54 |
wrap-reverse：换行，第一行在下方。
56 |
57 |
1
58 |
2
59 |
3
60 |
4
61 |
5
62 |
6
63 |
7
64 |
3、flex-flow
67 | flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
68 |
69 | .box {
70 | flex-flow: <flex-direction> || <flex-wrap>;
71 | }
72 |
73 |
74 |
1
75 |
2
76 |
3
77 |
4
78 |
5
79 |
6
80 |
7
81 |
4、justify-content属性
84 | justify-content属性定义了项目在主轴上的对齐方式。
85 |
86 | .box {
87 | justify-content: flex-start | flex-end | center | space-between | space-around;
88 | }
89 |
90 | flex-start（默认值）：左对齐
91 |
92 |
1
93 |
2
94 |
3
95 |
4
96 |
flex-end：右对齐
98 |
99 |
1
100 |
2
101 |
3
102 |
4
103 |
center： 居中
105 |
106 |
1
107 |
2
108 |
3
109 |
4
110 |
space-between：两端对齐，项目之间的间隔都相等。
112 |
113 |
1
114 |
2
115 |
3
116 |
4
117 |
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
119 |
120 |
1
121 |
2
122 |
3
123 |
4
124 |
5、align-items属性
127 | align-items属性定义项目在交叉轴上如何对齐。
128 |
129 | .box {
130 | align-items: flex-start | flex-end | center | baseline | stretch;
131 | }
132 |
133 |
134 | flex-start：交叉轴的起点对齐。
135 |
136 |
1
137 |
2
138 |
3
139 |
4
140 |
flex-end：交叉轴的终点对齐。
142 |
143 |
1
144 |
2
145 |
3
146 |
4
147 |
center：交叉轴的中点对齐。
149 |
150 |
1
151 |
2
152 |
3
153 |
4
154 |
baseline: 项目的第一行文字的基线对齐。
156 |
157 |
1
158 |
2
159 |
3
160 |
4
161 |
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
163 |
164 |
1
165 |
2
166 |
3
167 |
4
168 |
6、align-content属性
171 | align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。
172 |
173 | .box {
174 | align-content: flex-start | flex-end | center | space-between | space-around | stretch;
175 | }
176 |
177 |
178 | flex-start：交叉轴的起点对齐。
179 |
180 |
1
181 |
2
182 |
3
183 |
4
184 |
5
185 |
6
186 |
7
187 |
8
188 |
9
189 |
flex-end：与交叉轴的终点对齐。
191 |
192 |
1
193 |
2
194 |
3
195 |
4
196 |
5
197 |
6
198 |
7
199 |
8
200 |
9
201 |
center：与交叉轴的中点对齐。
203 |
204 |
1
205 |
2
206 |
3
207 |
4
208 |
5
209 |
6
210 |
7
211 |
8
212 |
9
213 |
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
215 |
216 |
1
217 |
2
218 |
3
219 |
4
220 |
5
221 |
6
222 |
7
223 |
8
224 |
9
225 |
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
227 |
228 |
1
229 |
2
230 |
3
231 |
4
232 |
5
233 |
6
234 |
7
235 |
8
236 |
9
237 |
stretch（默认值）：轴线占满整个交叉轴。
239 |
240 |
1
241 |
2
242 |
3
243 |
4
244 |
5
245 |
6
246 |
7
247 |
8
248 |
9
249 |
项目的属性
252 | 1、order属性
253 | order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
254 |
255 | .item {
256 | order: <integer>;
257 | }
258 |
259 |
260 |
1
261 |
2
262 |
3
263 |
264 |
2、flex-grow属性
267 | flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
268 | 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
269 |
270 | .item {
271 | flex-grow: <number>; /* default 0 */
272 | }
273 |
274 |
279 |
280 | 3、flex-shrink
281 | flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
282 | 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
283 |
284 | .item {
285 | flex-shrink: <number>; /* default 1 */
286 | }
287 |
288 |
289 |
290 |
2
291 |
3
292 |
4、flex-basis属性
295 | flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
296 |
297 | .item {
298 | flex-basis: <length>; | auto; /* default auto */
299 | }
300 |
301 |
302 |
1
303 |
2
304 |
3
305 |
5、flex属性
308 | flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
309 | 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
310 |
311 | .item {
312 | flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
313 | }
314 |
315 |
316 | 6、align-self属性
317 | align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
318 |
319 | .item {
320 | align-self: auto | flex-start | flex-end | center | baseline | stretch;
321 | }
322 |
323 |
324 |
1
325 |
2
326 |
327 |
4
328 |