【CSS3】新样式规则

[Kelichao]

flex弹性布局

flex布局也称弹性布局,拥有display:flex属性的元素内部子元素可以进行特殊排版

• demo
  

<div class="div2">
	<div class="div21">123</div>
	<div class="div22">12312</div>
</div>
<style type="text/css">
	.div2{
		display: flex;
		width:300px;
		height:300px;
		background:pink;
	}
	.div21 {
		flex:2;    /* 5分之2*/
		background:gray;
	}
	.div22 {
		flex:3;  /*5分之3*/
		background:yellow;
	}
</style>

标准写法

.box {
	display: -webkit-flex; /* Safari 带前缀的放前面 */
	display:flex;/*行内元素为display:inline-flex*/
}

总共有6个属性可以设置在box上

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction设置主轴的方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap表示如果一排放不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content设置左对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

参考阮一峰flex