flex
2021-09-29 15:56:13 0 举报
AI智能生成
flex布局
作者其他创作
大纲/内容
flex布局的术语
容器
flex容器 ,实际就是个块容器,它使用了flex布局技术
项目
子主题
主轴
与项目的排列方向是水平从左往右排列的
交叉轴
与主轴垂直的轴叫交叉轴,设置flex-direction:column;是从上往下排列
容器
主轴方向
默认:flex-direction:row;
列方向:flex-direction:column;
控制项目是否允许换行
默认不换行,通过压缩:lexe-wrap:nowrap;
换行 :flex-wrap:wrap;
place-content 设置项目在主轴上的排列与其对其 容器的剩余空间在项目之间的分配
pleace-items 交叉轴上的对齐
默认:place-items:stretch
place-items:start
place-items:end
place-items:center
交叉轴上没有剩余空间的概念,所以没有空间在元素中再分配
place-items:适用于所有项目,所以必须用容器中;
项目
flex-grow:0;默认是可以缩小,禁止放大
flex-grow:1;可以放大也可以缩小
flex-shrink:1;可以缩小,禁止放大
flex-shrink:0;项目保持设置的大小 不可缩小和放大 当窗口太小会出现水平滚动条
简写 :flex:flex-grow flex-shrink flex-basis
默认值:flex:0 1auto;initial
可以放大缩小响应式 :flex:1 1auto; flex:auto
用于pc,完全失去响应 flex:0 0auto ; flex:none
单值1代表的是flex-grow:1 flex:1;
双值 flex:0 8 em; 第二个值表示项目宽度
flex-basis:auto;flex-basis:6em; 项目在主轴上的宽度/width,但优先级大于width;
order项目的顺序,order3;每个项目的默认顺序是0 越大就排到后面
place-self:设置单独的项目 某一个项目在交叉轴上的对齐方式
0 条评论
下一页