flex子项的特性
flex-grow扩展比例
对剩余空间等比分配;
1.默认值是0，表示不占用剩余空白间隙扩展自己的宽度；
2.flex-grow: 1;flew-grow大于1时和1的效果一样;
css
.main {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background-color: pink;
flex-grow: 1;
}
3.flex-grow: 0.5;
flex-shrink收缩比例
默认值是1，表示flex容器空间不足时，元素的收缩比例；
1.默认是1，自动收缩，和父容器大小相同；
2.flex-shrink: 0;
3.flex-shrink: 0.5;
4.假设有多个子元素，这个计算方式很特别；
css
<style>
.main {
width: 500px;
height: 200px;
background-color: skyblue;
display: flex;
}
.main div:nth-child(1) {
width: 300px;
height: 100px;
background-color: sandybrown;
flex-shrink: 2;
}
.main div:nth-child(2) {
width: 400px;
height: 100px;
background-color: pink;
flex-shrink: 1;
}
/* 300 * 2 + 400 * 1 = 1000*/
/* 300 - 600/1000 * 200 */
/* 400 - 400/1000 * 200 */
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
</div>
</body>flex-basis及flex缩写
默认值是auto,指定了flex元素在主轴方向上的初始大小；flex-basis可以是auto、固定像素、百分比；
1.子元素大小没变;
css
.main div {
height: 100px;
width: 100px;
background-color: pink;
flex-basis: 100px;
}
2.子元素变大了;
css
.main div {
height: 100px;
width: 100px;
background-color: pink;
flex-basis: 200px;
}
flex
flex是flex-grow、flex-shrink、flex-basis的缩写；
css
flex: 1
相当于：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex: 0；
相当于：
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0;order（不常用）
默认值是0；改变某一个flex子项的排序位置；
1.order 1；第一个到最后面去了；
css
.main div:nth-child(1) {
order: 1;
}
.main div:nth-child(4) {
order: -1;
}
align-self（不常用）
默认值是auto,控制单独某个flex子项的垂直对齐方式；当子元素的align-self: auto; 它会和父元素的align-items保持一致；
1.align-self: flex-start;
常见布局
等高布局
1.flex默认就是等高布局；
2.传统方式: 真是奇技淫巧，我是从来没用过，好神奇！
css
<style>
.main {
width: 300px;
/* display: flex; */
border: 1px black solid;
overflow: hidden;
}
.main div {
width: 100px;
background-color: pink;
float: left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.main div:nth-child(2) {
background-color: salmon;
float: right;
}
</style>
<body>
<div class="main">
<div>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
</div>
<div><p>测试文字</p></div>
</div>
</body>
两列与三列布局
1.flex
css
// 两行
<style>
.main {
height: 100vh;
width: 100%;
background-color: bisque;
display: flex;
}
.left {
background-color: pink;
width: 300px;
}
.right {
flex-grow: 1;
background-color: sandybrown;
}
</style>
// 三列
<style>
.main {
height: 100vh;
width: 100%;
background-color: bisque;
display: flex;
}
.left {
background-color: pink;
width: 300px;
}
.middle {
flex-grow: 1;
background-color: bisque;
}
.right {
width: 300px;
background-color: sandybrown;
}
</style>2.传统方式float或BFC
css
.main {
width: 100%;
height: 100vh;
background-color: salmon;
}
.main div:nth-child(1) {
height: 100vh;
width: 200px;
background-color: antiquewhite;
float: left;
}
.main div:nth-child(2) {
/*还可以用BFC*/
//overflow: hidden;
margin-left: 200px;
height: 100vh;
background-color: aqua;
}Sticky Footer布局
css
.main {
/*关键样式，content内容溢出也不会挡住footer和header*/
min-height: 100vh;
background-color: antiquewhite;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
background-color: aquamarine;
}
.content {
flex-grow: 1;
background-color: salmon;
}
.footer {
height: 50px;
background-color: pink;
}溢出项布局
1.flex; 只需子项设置flex-shrink: 0;
2.传统方式:
css
<style>
.main {
height: 100px;
width: 500px;
background-color: blanchedalmond;
}
/*宽度需要自己计算*/
.main section {
width: 1320px;
}
.main div {
float: left;
width: 100px;
height: 50px;
margin-right: 10px;
background-color: pink;
}
</style>