老马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 ]