伸缩布局
传统的布局方案,基于盒状模型,依赖display+position+float属性。它对于那些特殊布局非常不方便,
重要属性:
display:flex 如果一个容器设置了这个属性,那么这个盒子里面的所有直接元素都会自动变成伸缩项flex
justify-content:
设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
语法:justify-content:flex-start|flex-end|center|space-between|space-around
设置子元素的排列方式:调整内容
flex-start:从左到右排列
flex-end:从父容器右边到左边
center:让子元素从父元素的中间位置开始排列
space-between:左右与父容器的左右对齐,中间产生同等的间距
space-around:将多余的空间,平均的分在每个子元素的两边,类似magin + auto
伸缩盒子的属性flex-flow:
flex属性是flex-grow,flex-shrink,flex-basis的简写,默认值是0 1 auto。
语法:flex:[flex-grow][flex-shrink][flex-basis]大多数情况下没必要用这种方法,都使用flex缩写。
flex:[number]这个语法制定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。
flex:auto 属性值设为suto的伸缩项目,会根据主轴自动伸缩以自用所有剩余空间。
=============================
等比扩张grow, 收缩比例shrink。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩张比例grow和 收缩比例shrink</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 600px;
border: 1px solid red;
margin: 0 auto;
/* 设置父容器为盒子,会使每一个子元素自动变成收缩项
当子元素的宽度和大于父容器宽度的适合,子元素会自动平均收缩。*/
display: flex;
/* 设置子元素的主轴方向上的排列方式 */
justify-content: space-around;
}
.first {
width: 200px;
height: 200px;
background-color: red;
/* flex-grow:扩展子元素的宽度, 类似安卓LinearLayout的layout_weight属性
设置当前元素应该占据剩余空间的比例值,默认值0 */
/* flex-grow: 1; */
/* flex-shrink:定义收缩比例(不够空间的分配比例),通过设置的值来计算收缩空间,默认值1。
空间不够,不够的那一部分。由每个子元素来平摊。
eg:
当值为1:0:0,就是第一个元素占据所有的收缩空间,最后div显示宽度分别为100-200-200。
当值为0:0:0,就都不做不够空间的分配,最后可能会溢出。
当值是2:1:1,div显示宽度是150-175-175
比例值计算:当前空间flex-shrink/所有兄弟元素的flex-shrink的和*/
flex-shrink: 2;
}
.second {
width: 200px;
height: 200px;
background-color: #006400;
/* flex-grow: 0; */
flex-shrink: 1;
}
.third {
width: 200px;
height: 200px;
background-color: yellow;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
=======================
flex:1比4划分区域,类似使用百分比,划分div占用的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex:1比4划分区域</title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 100%;
height: 500px;
background-color: #CCCCCC;
margin: 0 auto;
/* 设置父容器为伸缩盒子 */
display: flex;
/* 设置子元素在主轴方向上排列方式 */
/* justify-content: flex-start; */
}
.left{
flex: 1;
background-color: yellowgreen;
}.right{
flex: 4;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>