弹性布局样式属性

2.项目换行

属性

值

注释

flex-wrap

nowrap

默认值，主轴方向不够也不换行

wrap

主轴方向空间不够时，自动换行

wrap-reverse

交叉轴终点对齐，主轴方向空间不够时，反方向换行

3.主轴方向和换行可以缩写

flex-flow:direction wrap; //先写主轴方向，再写如何换行

4.定义项目在主轴上的对齐方式

属性

值

注释

justify-content

flex-start

默认值，主轴起点对齐

center

主轴的中心对齐

flex-end

主轴的终点对齐

space-around

每次项目的间隙相同

space-between

两端对齐

示意效果(来源菜鸟教程)

项目的样式

某一个项目使用
1.给某个项目单独设置交叉轴上的对齐方式

属性

值

注释

align-self

flex-start

默认值，在交叉轴起点对齐

center

交叉轴中间对齐

flex-end

交叉轴终点对齐

baseline

每个项目中的文本，基线（文本分基线、底线、顶线、中线）要对齐

stretch

项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴

auto

使用容器定义的align-items的值（交叉轴的对齐方式）

2.order
    取值为无单位整数。
定义项目的排列顺序，值越小，越靠近主轴的排列方向，默认值为0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; 
    display: flex;
}

#main div {
    width: 100px;
    height: 100px;
}

div#d1{order: 6;}
div#d2{order: 4;}
/*顺序为蓝红*/
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;" id="d1"></div>
  <div style="background-color:blue;" id="d2"></div>
  
</div>
</body>
</html>



属性

值

注释

flex-grow

默认值是0

当主轴有多余的区域，项目是否放大，放大比例是多少。默认值为0，不放大。把多余的区域，按照比例分配，加上原始的尺寸（这个项目的实际尺寸）

flex-shrink

默认值1

当主轴空间不足时，项目是否缩小，怎么缩小。不设置换行的情况下，会自动缩小。主轴不足的部分，按照比例。分配给各个项目去缩减。

flex-basis

**%

设置某个项目在主轴上占据的基本尺寸，通常取值为%。flex-basis优先级大于项目自己定义的尺寸

关于这三个值有缩写 （flex-grow flex-shrink flex-basis的缩写）

flex:0 0 20%;

效果图

html5弹性布局指的是 html弹性布局代码_html5弹性布局指的是

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#content{
				width: 1000px;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap; //本行占满后换行
				justify-content: space-between;
			}
			#content>div{background-color: #36d;}
			.top_height{height: 377px;}
			.bottom_height{height:233px;}
			#content>div:first-child{flex:0 0 32%;}
			#content>div:nth-child(2),#content>div:nth-child(3){flex:0 0 33%;;margin-left: 10px;}
			#content>div:nth-child(4){flex:0 0 50%;margin-top: 10px;}
			#content>div:nth-child(5){flex:0 0 49%;margin-top: 10px;}
			
		</style>
	</head>
	<body>
		<div id="content">
			<div class="top_height"></div>
			<div class="top_height"></div>
			<div class="top_height"></div>
			<div class="bottom_height"></div>
			<div class="bottom_height"></div>
			
		</div>
	</body>
</html>