A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

995

初级黑马

  • 黑马币:16

  • 帖子:6

  • 精华:0

© 995 初级黑马   /  2019-3-18 10:19  /  1065 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

在父级添加了display: flex;  
儿子设置flex: 1;就是等分了不用设置浮动  就能一行显示
父级宽度设置百分比 ---> 才能进行伸缩
Min-width 最小值 max-width 最大值    给父级设置   
指定盒子可以固定  其它盒子还是可以等分
flex-direction  row行   column 列 row-reverse  行倒转(123----->321 )

justify-content: flex-start 让子元素从父元素的开头对其 盒子顺序不变
flex-end  让子元素从父元素的屁股对其
盒子顺序不变
center
让盒子居中对其 盒子若是宽度固定 父盒子填不满  自动两边空白  盒子顺序不变
space-between
左右贴紧盒子  中间的平均分布空白间隙
space-around  
自动给每个盒子添加了左右外边距

垂直对其 (只能在伸缩布局中实现)
align-items  
flex-start 上对齐
flex-end  底对其
center 居中对其
stretch  子元素拉伸适应父级盒子对其

flex-wrap控制是否换行
当子盒子内容多于父盒子的时候使用
nowrap   不拆行不拆列   既使子盒子设置了宽高  也会强制收缩
wrap  换行显示
wrap-reverse  翻转

简写
flex-flow: flex-derection flex-wrap;


order(只能在伸缩布局中实现)
用css控制前后顺序
默认order=0
数字越小越靠前

3 个回复

倒序浏览
我行内元素不服

点评

995
哈哈哈  发表于 2019-3-18 13:07
回复 使用道具 举报
我块级元素也不服
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马