黑马程序员技术交流社区

标题: 伸缩布局笔记 [打印本页]

---

作者: 995    时间: 2019-3-18 10:19
标题: 伸缩布局笔记
在父级添加了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
数字越小越靠前

---

作者: 千夜瞳    时间: 2019-3-18 10:55
我行内元素不服

---

作者: 一页青    时间: 2019-3-18 19:11
我块级元素也不服

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2