一、项目单独布局在单独的项目上面单独设置属性
1、align-self:（基于交叉轴进行布局）
| align-self:auto | 默认值， |
| align-self:start | 单独上对齐 |
| align-self:end | 单独下对齐 |
| align-self:center | 单独中间对齐 |
2、弹性布局中每个项目单独有个order数值，默认为0，数值越小，项目越靠前
实例：
<style>
.box{
width: 500px;
height: 500px;
background-color: black;
display: flex;
align-items:center;
}
.box .one,
.box .two,
.box .three
{
width: 100px;
height: 100px;
}
.one{
background-color: #0000FF;
}
.two{
background-color: green;
/* 单独对这个块进行定义， */
align-self:start;
order:-1;
}
.three{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="one">项目1</div>
<div class="two">项目2</div>
<div class="three"> 项目3</div>
</div>
</body>运行截图：
3、项目放大
flex-grow:0 项目默认为不放大
实例：fle-grow：1和flex-grow：2 将剩余的200px分为了三份，分别赋予给了two和three。
<style>
.box {
width: 500px;
height: 500px;
background-color: black;
display: flex;
align-items: center;
}
.box .one,
.box .two,
.box .three {
width: 100px;
height: 100px;
}
.one {
background-color: #0000FF;
}
.two {
background-color: green;
/* 将剩下的200px空间分给two，
数值为1，two和three总共将剩余的分了三分，two占一份
*/
flex-grow: 1;
}
.three {
background-color: red;
/*
数值为2，three占2份
*/
flex-grow: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="one">项目1</div>
<div class="two">项目2</div>
<div class="three"> 项目3</div>
</div>4.项目缩小
flex-shrink:1默认为1，缩小一份
与项目扩大同理。
<style>
.box {
width: 500px;
height: 500px;
background-color: black;
display: flex;
align-items: center;
}
.box .one,
.box .two,
.box .three {
width: 300px;
height: 300px;
}
.one {
background-color: #0000FF;
/* 将多出的400px空间分给one、two、three */
/* one默认缩小一份 */
}
.two {
background-color: green;
/*
数值为2，two缩小两份
*/
flex-shrink: 2;
}
.three {
background-color: red;
/*
数值为2，three缩小占2份
*/
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="one">项目1</div>
<div class="two">项目2</div>
<div class="three"> 项目3</div>
</div>运行截图：
5、简写
flex：auto 、 flex：1 1 auto
父容器有剩余时，等比例放大，空间不足时，等比例缩小
flex：none flex：0 0 auto
默认值，没有变化
816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
