老马CSS3弹性盒子笔记
flex-direction属性决定主轴的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.wrap{
width: 960px;
margin: 5px auto;
border: 1px solid #ccc;
color: #000;
font: 16px/1.5 "microsoft yahei";
}
.hd{
height: 30px;
background-color: red;
opacity: .8;
color: #fff;
line-height: 30px;
}
.wrap .bd{
display: flex;
}
.wrap .bd .child{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid maroon;
}
.row-reverse{
flex-direction: row-reverse;
}
.column{
flex-direction: column;
}
.column-reverse{
flex-direction: column-reverse;
}
</style>
</head>
<body>
<div class="wrap">
<div class="hd">设置弹性盒子的主轴方向:flex: row;</div>
<div class="bd">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">设置弹性盒子的主轴方向:flex: row-reverse;</div>
<div class="bd row-reverse">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">设置弹性盒子的主轴方向:flex: column;</div>
<div class="bd column">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">设置弹性盒子的主轴方向:flex: column-reverse;</div>
<div class="bd column-reverse">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
</body>
</html>
设置弹性盒子中的子元素是否换行:flex-wrap
设置弹性盒子主轴子元素的对齐方式:justify-content
设置弹性盒子侧轴子元素的对齐方式:align-items
设置父容器多行子项整体垂直对齐方式align-content
图解子盒子的属性
设置子盒子的排序order
<div class="wrap">
<div class="hd">设置子元素的order属性来给子项进行排序,默认值是0</div>
<div class="bd">
<div class="child" style="order: 5;">1</div>
<div class="child" style="order: 4;">2</div>
<div class="child" style="order: 3;">3</div>
<div class="child" style="order: 2;">4</div>
<div class="child" style="order: 1;">5</div>
</div>
</div>
定义子项宽度之和不足父元素宽度时,将剩余的部分,按比例分给对应的子项,进行宽度的的增加flex-grow
3个子项宽度之和是300px,父盒子宽度960px;剩余660px,将660px中的5/10给了第一个子项,第一个子项的宽度变成了430px。
如果每个子项的设置的宽度相等,在加上flex-grow: 1;则子项等宽不满父盒子
<div class="wrap">
<div class="hd">定义子项宽度之和小于父元素宽度时,将剩余的部分,按比例分给对应的子项,进行宽度的增加</div>
<div class="bd">
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 5;">1</div>
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 2;">2</div>
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 3;">3</div>
</div>
</div>
定义子项宽度之和超过父元素宽度时,将超出的部分,按比例分给对应的小,进行宽度的减小flex-shrink
三个子项的宽度之和是1200px,父盒子宽度是980px,超出220px, 三个子项的flex-shrink的值分别是5,3,3
第一个子项的宽度减小220*(5/11)=100px,变成300px
<div class="wrap">
<div class="hd">定义子项宽度之和超过父元素宽度时,将超出的部分,按比例分给对应的小,进行宽度的减小</div>
<div class="bd">
<div class="child" style="width:400px;flex-shrink: 5;">1</div>
<div class="child" style="width:400px;flex-shrink: 3;">2</div>
<div class="child" style="width:400px;flex-shrink: 3;">3</div>
</div>
</div>
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间
得到的是两边固定100px,中间占据剩下的父容器剩下的部分,可用于响应式布局
<div class="wrap" style="width: 100%;">
<div class="hd">flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间</div>
<div class="bd">
<div class="child" style="box-sizing: border-box; flex-basis:100px;">1</div>
<div class="child" style="box-sizing: border-box; flex-grow:1;">2</div>
<div class="child" style="box-sizing: border-box; flex-basis:100px;">3</div>
</div>
</div>
设置子盒子对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
<div class="wrap">
<div class="hd">align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性</div>
<div class="bd align-items-flex-start" style="height: 200px;">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child" style="align-self: flex-end;">5</div>
</div>
关于flex-grow的计算:
当是flex:1;综合形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-grow</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 600px;
height:200px;
background-color: lightgrey;
}
.flex-item {
background-color: aqua;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item" style="flex: 1;">flex item 2</div>
<div class="flex-item" style="flex: 2;">flex item 3</div>
</div>
因为三个子元素都没有设置宽度,第2,3个元素设置了flex:1;在计算时,600-88=512,将512分成3份,512/3=170.667
1份给第二个元素,2份给第三个元素,这里只减去了一个88,这是因为没有设置宽度,第2,3个要分配剩余宽度,计算剩余宽度时,将第2,3元素的宽度当成0;
三个子元素显示设置宽度:600-100=500;500/3=166.667
<div class="flex-container">
<div class="flex-item" style="width: 100px;">flex item 1</div>
<div class="flex-item" style="width:100px;flex: 1;">flex item 2</div>
<div class="flex-item" style="width:100px;flex: 2;">flex item 3</div>
</div>
三个子元素显示设置宽度,都设置flex:
<div class="flex-container">
<div class="flex-item" style="width: 100px;flex: 1;">flex item 1</div>
<div class="flex-item" style="width:100px;flex: 2;">flex item 2</div>
<div class="flex-item" style="width:100px;flex: 3;">flex item 3</div>
</div>
当flex-grow形式:
600-88*3=336, 336/3=112
三个元素的宽度分别是 88,88+112=200,88+112*2=312
<div class="flex-container">
<div class="flex-item" style="">flex item 1</div>
<div class="flex-item" style="flex-grow: 1;">flex item 2</div>
<div class="flex-item" style="flex-grow: 2;">flex item 3</div>
</div>
给第三个元素加上margin-left:90px;
600-88*3-90=246, 246/3=82
三个子元素的宽度 :88, 88+82=170 ,88+82*2=252
<div class="flex-container">
<div class="flex-item" style="">flex item 1</div>
<div class="flex-item" style="flex-grow: 1;">flex item 2</div>
<div class="flex-item" style="flex-grow: 2;margin-left: 90px;">flex item 3</div>
</div>
注意flex:1;和flex-grow:1;的区别
flex:1;就相当于flex:1 0 auto; 三个值分别是[ flex-grow ] || [ flex-shrink ] || [ flex-basis ]