伸缩盒(Flexble Box)——flex-grow

伸缩盒(Flexble Box)——flex-grow

flex-grow:扩展比率

flex-grow也是写在子元素里面的,

flex-grow和flex-shrink的区别:

flex-grow是用剩余的容器空间来平均分的

flex-shrink是将全部的容器空间,平均之后,再按照一定的比率分,有些子元素盒子没有设置flex-shrink属性,就默认其占一份


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			.box {
      
				width: 1400px;
				height: 700px;
				border: 1px solid firebrick;
				display: flex;
			}

			.box>div {
      
				width: 200px;
				height: 200px;
				background-color: firebrick;
				border: 1px solid #F5DEB3;
			}
/* 剩余的400px分成5份,每份80px */
			.box>div:nth-of-type(1) {
      
				/* 240px+200px=440px */
				flex-grow: 3;
			}

			.box>div:nth-of-type(2) {
      
				/* 160px+200px=360px */
				flex-grow: 2;
			}
		style>
	head>
	<body>
		<div class="box">
			
			<div>div>
			<div>div>
			
			<div>div>
			<div>div>
			<div>div>
		div>
	body>
html>

你可能感兴趣的:(笔记,学习,网页布局,css,html,flex,js,flexbox)