布局排版"/>
flex布局排版
适用于<text>
格式 要求 在一行显示、溢出的用省略号代替、向左对齐
.text-div {text-align: left;lines: 1;text-overflow: ellipsis;}
自适应高度/ 内容居中(需提前设好上层DIV的宽度)
flex-direction: column; //纵向排列justify-content: center; //主轴居中align-items: center; //交叉居中flex-shrink: 0; //空间不够用时,不允许被压缩flex-grow: 1; //有剩余空间时允许被拉伸
flex布局排版
横向:flex-direction: row-reverse;(反向)
横向:flex-direction: row;(正向)
竖向:column(正) | column-reverse(反)
justify-content:
从左边开始:flex-srart
右:flex-end
居中:center
两边对齐居中:space-between
两边对齐(有空隙)居中:space-around // space-evenly
不换行:flex-wrap: nowrap
换行: flex-wrap: wrap(从上到下)
换行: flex-wrap: wrap-severse(从下往上换行)
自适应宽度
自动压缩/拉伸当前div内的所有div:flex-flow: column wrap;
.container {display: flex;...gap: 10px;gap: 10px 20px; /* row-gap column gap */row-gap: 10px;column-gap: 20px;
}
更多推荐
flex布局排版
发布评论