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
本文使用 文章同步助手 同步
