order
更改弹性子元素的的排列顺序 , 值越小越靠前 ,默认为0,可以设置负值.
htmlcss
<div class="div">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div> div{
height: 600px;
width: 400px;
margin: 20px;
border: black 2px solid;
display: flex;
}
.div>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
}
.div>div:nth-child(3){
width: 90px;
order:0;
}
.div>div:nth-child(6){
width: 30px;
order:-1;
}
.div>div:nth-child(9){
order:-4;
}flex-basis
弹性子元素的宽度相当于width
htmlcss
<div class="div div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="div div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div> div{
height: 600px;
width: 400px;
margin: 20px;
border: black 2px solid;
display: flex;
}
.div1>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:60px;
}
.div2>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:120px;
}
.div>div:nth-child(3){
flex-basis:120px;
}
.div>div:nth-child(6){
flex-basis:180px;
}
.div>div:nth-child(9){
flex-basis:110px;
}根据对比可知，flex-basis是通过比例来调节大小
flex-grow
项目的放大比例，（默认为0，即如果存在剩余空间，也不放大）
htmlcss
<div class="div div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="div div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div> div{
border: black 2px solid;
}
.div{
height: 600px;
width: 400px;
margin: 20px;
display: flex;
}
.div1>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:60px;
}
.div2>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:10px;
}
.div>div:nth-child(1){
flex-grow:1;
}
.div>div:nth-child(2){
flex-grow:1;
}
.div>div:nth-child(3){
flex-grow:2;
}如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
弹性子元素是否可以进行收缩：0不允许 1允许
默认为1，即如果空间不足，该项目将缩小。
htmlcss
<div class="div div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="div div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div> div{
border: black 2px solid;
}
.div{
height: 200px;
width: 400px;
margin: 20px;
display: flex;
}
.div1>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:60px;
}
.div2>div{
width: 60px;
height: 60px;
line-height: 30px;
margin: 5px;
flex-basis:120px;
}
.div>div:nth-child(1){
flex-shrink:1;
}
.div>div:nth-child(2){
flex-shrink:1;
}
.div>div:nth-child(3){
flex-shrink:0;
}如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
复合式写法flex
flex只有一个值代表平均分配父元素的宽度所占份数
flex：flex-grow flex-shrink flex-basis 默认值0 1 auto
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
htmlcss
<div class="div">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div> div{
border: black 2px solid;
}
.div{
height: 200px;
width: 400px;
margin: 20px;
display: flex;
align-items:flex-end;
}
.div>div{
width: 60px;
line-height: 30px;
margin: 5px;
}
.div>div:nth-child(1){
align-self:auto;
}
.div>div:nth-child(2){
align-self:flex-end;
}
.div>div:nth-child(3){
align-self:flex-start;
}
.div>div:nth-child(4){
align-self:center;
}
.div>div:nth-child(5){
align-self:baseline;
line-height: 50px;
}
.div>div:nth-child(6){
align-self:stretch;
}
Comments | NOTHING