标签：FLex 间距 盒子 03 布局 space 弹性 父级
百分比布局
-
目标
-
了解百分比布局方案
-
-
学习内容
-
特点
-
流式布局
-
宽度自适应，高度固定
-
-
布局方式
-
宽度为半分比写法
-
-
FLex布局
-
目标
-
使用Flex布局模型完成网页基本布局效果
-
Flex的优势和特点
-
浏览器提倡的布局模型，页面渲染性能高
-
布局简单、方便
-
避免浮动脱标的问题
-
兼容性较高（不兼容低版本浏览器）
组成部分
-
弹性容器（父级， 添加display:flex的盒子）
-
弹性盒子（子级）
-
主轴（默认水平）
-
侧轴（默认垂直）
主侧轴对齐方式
主轴：justify-content
-
center：居中
-
space-between：间距出现在弹性盒子之间
-
space-evenly：父子级间距都相同
-
space-around：间距出现在弹性盒子两侧
-
视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
侧轴：align-items（控制所有弹性盒子）
-
center：居中
-
stretch：默认值， 拉伸
-
align-self（控制某个弹性盒子）
弹性伸缩比
-
flex: 整数数字;
-
占用父级剩余尺寸的份数
-
标签：FLex,间距,盒子,03,布局,space,弹性,父级 来源： https://www.cnblogs.com/qdatm/p/15546460.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。