布局格式

1
2
3
4
5
<div class="box">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>
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
//Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
  display: -webkit-flex;  /* Safari */
  display: flex;
  height:15rem;
  border:1px dashed #c60;
  overflow:auto;
}

.item{
  display: inline-flex;  /*行内弹性布局*/
  width:8rem;
  height:5rem;
  margin:.8rem;
  padding:.8rem;
  color:#fff;
  background:#c60;
  box-sizing: border-box;
  border: 1px solid #c60;
  background-clip:content-box;
	
  /*行内弹性布局，text-align 无效*/
  text-align:right;
	
  /*行内弹性布局，对齐方式*/
  justify-content: center;
  align-items: center;
}
.item:nth-child(3){ height:8rem;}
.item:nth-child(7){ height:3rem;}
.event,.clearStyles{
  cursor:pointer;
  border-bottom:1px dashed #cdcdcd;
}
.event:hover,.currStyle{
  color:#0092db
}
.clearStyles{
  color:#c60
}
  • 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

效果

1
2
3
4
5
6
7
8
9

box 容器属性

点击属性值，查看效果 [清空样式]

  • flex-direction：
    row | row-reverse | column | column-reverse;

  • flex-wrap：
    nowrap | wrap | wrap-reverse

  • flex-flow： [<flex-direction> || <flex-wrap>]
    （默认值：row nowrap）

  • justify-content：
    flex-start | flex-end | center | space-between | space-around;

  • align-items：
    flex-start | flex-end | center | baseline | stretch;

  • align-content：
    flex-start | flex-end | center | space-between | space-around | stretch;

item 项目属性

  • order ： 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow ： 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink ： 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis
  • flex ： none | [ <flex-grow> <flex-shrink> || <flex-basis> ]

快捷设置 : auto (1 1 auto) 和 none (0 0 auto)

  • align-self : 允许单个项目有与其他项目不一样的对齐方式