flex弹性布局简单总结

flex弹性布局：（百分百布局（恶心））

flex可以使块元素变的有高宽的

常见属性

flex-direction 设这主轴的方向

flex-wrap：设置是否可以换行

flex-flow 复合属性

justify-content 横轴的排列方式（单行

align-content 侧轴的排列方式（多行

align-item 侧轴的排列方式（单行

flex-direcion 的方向设置

flex-direction:row-reverse;
​
flex-direction:row;
​
flex-direction:column;
​
flex-direction:column-reverse;

justify-content 设置水平元素的排列方式

justify-content:flex-start
​
justify-content:flex-end
​
center
​
平均分配剩余空间
​
justify-content:space-around
​
justify-content:space-between

flex-wrap设置子元素是否换行

flex-wrap:nowrap 不换行

flex-wrap:wrap

 

 

分配剩余空间的大小

针对单一盒子的调节

nth-child(3){

align-self:flex-end

}

div span:nth-child(2){

order:-1

}

css- 基础布局：

flex-shrink就是根据超出的比例进行默认的缩放
​
设置为0就是默认不进行缩放
​
父元素的宽度是 400px
​
三个子元素的div是200 px总大小600px
​
父元素设置flex
​
子元素1设置flex-shrink:3
​
其余默认为1
​
则1压索（200*3/5=120px
​
其余缩小40px

flex-grow是同理是剩余宽度的放大