flex布局精简版

flex布局

一行

display:flex;
默认
flex-direction:row;

一列

flex-direction:column;

主轴

居中
justify-content: content;
前
justify-content: start;
后
justify-content: end;
平分剩余空间
justify-content: space-aroud;
两侧对齐在平分剩余空间
justify-content: space-between;

辅轴单行

前
align-items: flex-start;
后
align-items: flex-end;
居中
align-items: concent;
拉伸到和父元素一样长
align-items: stretch;

辅轴多行

前
align-content: flex-start;
后
align-content: flex-end;
居中
align-content: content;
平分父元素剩余空间
align-content: space-around;
两端对齐在平分父元素剩余空间
align-content: space-between;
拉伸到和父元素一样长
align-content: stretch;

子元素设置

权重

很容易实现圣杯布局
是flex加起来,平均分配父元素的剩余空间 ,
flex:1;
flex:2;
flex:4;
flex:3;
分析上面代码;
总数:10
剩余空间:100;
1. 10
2. 20
3. 40
4. 30

单个子元素的辅轴设置

align-self: flex-end;
align-self: flex-start;
align-self: content;
align-self: stretch;

后记

当父元素设置为flex,子元素自动变成block