老雷html/css开发视频教程之学习css的flex布局
查看视频教程或者获取有关《老雷html/css开发视频教程》更多信息

老雷html/css开发视频教程之flex布局

一、display:flex;


二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

flex-direction:row | row-reverse | column | column-reverse

row: 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。

row-reverse: 对齐方式与row相反。

column: 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。

column-reverse: 对齐方式与column相反。

三、flex 设置或检索弹性盒模型对象的子元素如何分配空间

flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

div{

flex:1;

}

.flex{width:600px;}

.a{width:200px;}

.b{flex-grow:1;width:50px;}

.c{flex-grow:3;width:50px;}

<div class="flex">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

<div>

1、flex-grow 设置或检索弹性盒的扩展比率 flex宽度比内容宽度大

flex剩余宽度 600-200-50-50=300px

b=50+300/4=125;

c=50+300/4*3=275;

2、flex-shrink 设置或检索弹性盒的收缩比率 flex宽度比内容宽度小

flex-shrink:<number> 默认 1

.flex{width:400px;}

.a{width:200px;}

.b{width:100px;}

.c{flex-shrink:3;width:300px;}

<div class="flex">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

<div>

flex超出宽度 400-200-100-300=-200;

需要分配a,b,c为 1+1+3=5;

实际宽度 a=200-200*1/5=160 b=100-200*1/5=60 c=300-200*3/5=180

3、flex-basis 设置或检索弹性盒伸缩基准值

flex-basis:<length> | <percentage> | auto | content

<length>: 用长度值来定义宽度。不允许负值

<percentage>: 用百分比来定义宽度。不允许负值

auto: 无特定宽度值,取决于其它属性值

content 基于内容自动计算宽度

四、align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

row竖向对齐

align-items:flex-start | flex-end | center | baseline | stretch

五、justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

row 横向对齐

justify-content:flex-start | flex-end | center | space-between | space-around

六、flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap:nowrap | wrap | wrap-reverse

nowrap 容器为单行。该情况下flex子项可能会溢出容器

wrap flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行

wrap-reverse 反转 wrap 排列。

七、align-content 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式

align-content:flex-start | flex-end | center | space-between | space-around | stretch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex</title>
		<style>
			.flex{
				display: flex;
				flex-direction: row;
				margin-bottom: 5px;
				align-items: center;
				justify-content:center;
				align-content:center;
				height: 200px;
				flex-wrap: wrap;
			}
			.flex-1{
				flex: 1;
				background-color: #FF6600;
			}
			.w200{
				width: 200px;
				height: 100px;
				background-color: #0F8E82;
			}
		</style>
	</head>
	<body>
		<div class="flex">
			<div class="w200">是是是</div>
			<div class="flex-1">啊啊</div>
			<div><div>xx</div><div>xx</div></div>	 
		</div>
		<div class="flex">
			 
			<div class="flex-1"></div>
			<div class="w200"></div>		 
		</div>
		<div class="flex">
			<div class="w200"></div>
			<div class="flex-1"></div>
			<div class="w200"></div>		 
		</div>
	</body>
</html>