1. justify-content
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
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="viewport" content="width=device-width, initial-scale=1">
<
title
>Flexbox弹性盒布局</
title
>
<
style
>
.demo{
display: -webkit-flex;
justify-content: space-between;
}
</
style
>
</
head
>
<
style
>
</
style
>
<
body
>
<
div
class="demo">
<
div
>姓名: 张三</
div
><
div
>年龄: 26岁</
div
>
</
div
>
<
div
class="demo">
<
div
>性别: 男</
div
><
div
>生日: 1995-05-06</
div
>
</
div
>
<
div
class="demo">
<
div
>检查编号: 25</
div
><
div
>住院号: 198</
div
>
</
div
>
</
body
>
</
html
>
|
效果图
2.flex 三行二列
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
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="viewport" content="width=device-width, initial-scale=1">
<
title
>Flexbox弹性盒布局</
title
>
<
style
>
.demo{
display: -webkit-flex;
}
.item-flex{
flex:1;
}
</
style
>
</
head
>
<
style
>
</
style
>
<
body
>
<
div
class="demo">
<
label
class="item-flex">姓名: 张三</
label
><
label
class="item-flex">年龄: 26岁</
label
>
</
div
>
<
div
class="demo">
<
label
class="item-flex">性别: 男</
label
><
label
class="item-flex">生日: 1995-05-06</
label
>
</
div
>
<
div
class="demo">
<
label
class="item-flex">检查编号: 25</
label
><
label
class="item-flex">住院号: 198</
label
>
</
div
>
</
body
>
</
html
>
|
效果图
本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7352767.html,如需转载请自行联系原作者