菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 谷江涛-20221025-流失布局弹性布局 [打印本页]

作者: 暴风雨 时间: 2022-10-25 23:25
标题: 谷江涛-20221025-流失布局弹性布局
一、今日内容：背景缩放  background-size  设置宽高  cover contain

  流失布局
就是百分比布局  也叫做非固定像素
通过盒子的宽度进行百分比设置达到根据屏幕的宽度进行相应伸缩目的，不受固定像素的限制
flex 弹性布局
任何元素都可以设置flex布局设置flex布局的元素子元素 float clear 和vertical-align无效
采用flex元素的盒子被称为容器  里子元素称为项目
flex-dierction 设置主轴方向
属性
row x轴水平从左到右排列
row-reverse  x轴水平从右到左顺序颠倒
column y轴从上到下排列
column-reverse  y轴从下到上排列  顺序颠倒
juistify-content 设置主轴子项的排列方式
属性
flex-start  从左到右排列
flex-end  从右到左排列顺序不颠倒
center x轴居中
align-around  平分剩余空间
align-between  两边盒子贴边中间子项平分剩余空间
align-steams  设置单行纵向排列
属性
flex-start  从左到右排列
flex-end 从纵轴尾部排列
center 纵轴居中
stretch 拉伸  子项不设置宽高拉伸至父项宽高

align-content  多行纵向排列单行无效
flex-start  从左到右排列
flex-end  纵向尾部从左到右排列
center 纵向居中
space-around 纵向平分剩余空间
space-stween  纵向两边贴边其余平分剩余空间

flex-warp 换行排列
默认不换行多余的像素被后面元素覆盖nowarp
warp换行

flex-flow复合属性  是flex-direction 和flex-wrap复合属性

flex子项属性
align-self 对子项设置侧轴排列方式
没有该属性继承父元素里align-stems
flex-start 从头开始
flex-end纵向尾部开始
center 纵向居中

order 定义项目排列的顺序
默认值0
数值越小越靠前

flex来控制子项占份数
flex：1
子元素平分父项宽高
同一个盒子可以是容器也可以是项目
如果子元素设置宽高那么其他设置flex:1;将平分剩余空间
二、今日问题
无
三解决方法
无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)