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 条评论
下一页
