css 弹性盒子

系统管理员 2021-07-24 17:33 414阅读 0赞

弹性盒子
    	使用弹性盒子后，float浮动将会失效，即不能再用float来排列
    	在浏览器窗口变化时，盒子相应改变大小
    	子容器会在父容器内变化
    	
    	子容器属性
    		flex-grow:数字； 即父元素有剩余空间,子元素如何分配父元素的剩余空间,默认为0不索取,值越大，索取的越厉害。
    		
    		flex-shrink:0;  即子元素会超出父元素,子元素如何缩小自己的宽度的,默认为1,值越大缩小越厉害
    			算法:(将子元素相比父元素超出的大小/(所有的(子元素的宽度*比例值)的和))的结果*子元素的宽度
    			
    		flex-flow:row-reverse wrap;  是 flex-direction 和 flex-wrap 属性的复合属性。
    		
    		flex-basic:npx;  基准尺寸,水平代替元素的宽度,竖直代替元素的高度,优先级高于设置的width/height
    		
    		order:n; 定义元素的排序位置,n越小越在前面
    		
    		flex:
    			是flex-grow，flex-shrink,  flex-basis的复合属性
    			flex:none; 等同于flex-grow: 0;flex-shrink: 0;flex-basis: auto;
    			flex:auto; 等同于flex-grow: 1;flex-shrink: 1;flex-basis: auto;
    			flex:1; 默认子元素均匀占据父元素宽度
    				等同于:flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
    			flex:n%; 等同于flex-grow: 1; flex-shrink: 1; flex-basis: n%;
    			flex: 2 3;	等同于flex-grow: 2; flex-shrink: 3; flex-basis: 0%;
    			flex:2333 3222px; 等同于flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;
    		
    	父容器属性
    		开启弹性盒子
    			display:flex；  在父容器开启，子容器默认在父容器内水平布局
    			flex-wrap:wrap/wrap-reverse  换行
    			flex-direction:row/column  主轴方向
    
    				
    		设置横轴方向的布局方式
    			justify-content:flex-start;  默认值，位于父容器开头
    			justify-content:flex-end;  位于父容器结尾
    			justify-content:center;   位于父容器中心
    			justify-content:space-between;  每个样式之间留有空白，
    			justify-content:space-around; 	每个样式之前和之间都留有空白
    			flex-flow: wrap; 使得子元素自动拆行
    			
    		竖直布局
    			flex-direction:column;
    		水平布局
    			flex-direction:row;
    		
    		设置纵轴方向的布局方式(适合当行元素,即未使用flex-wrap:'wrap'情况下)
    			align-items:stretch; 默认值，拉伸以适应容器
    			align-items:center;
    			align-items:flex-start;
    			align-items:flex-end;
    		
    		设置纵轴多行元素的布局(使用了:flex-wrap:'wrap'多行情况),单行情况下无效
    			align-content: stretch|center|flex-start|flex-end|space-between|space-around
    		
    		设置子元素布局方式
    			align-self:center;	它覆盖了外部容器规定的align-items属性,同样也只规定在交叉轴上的对齐方式,如果想设置某一个item有不一样的对齐方式的时候,可以用它

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>伸缩盒子/弹性盒子</title>
    	</head>
    	<style type="text/css">
    		.box{ 
    			width:100%;
    			height: 500px;
    			background-color: red;
    			display: flex;
    			
    		}
    		.box>div{ 
    		
    			height:600px;
    			
    		}
    		
    		.item1{ 
    			background-color: pink;
    			flex-grow: 1;
    			
    		}
    		.item2{ 
    			background-color: orange;
    			flex-grow: 2;
    		}
    		.item3{ 
    			background-color:gray;
    			flex-grow:3;
    		}
    		
    		.parent{ 
    			width:600px;
    			height: 700px;
    			background-color: violet;
    			display: flex;
    			align-items: ;
    		}
    		.parent>div{ 
    			width:100px;
    			height:200px;
    			background-color: cadetblue;
    		}
    	</style>
    	<body>
    		<div class="box">
    			<div class="item1"></div>
    			<div class="item2"></div>
    			<div class="item3"></div>
    		</div>
    		
    		<div class="parent">
    			<div class="child"></div>
    			<div class="child2"></div>
    			<div class="child3"></div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/744917443dae480686f5c4625c09eff1.png