flex布局排版

布局排版"/>

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;
}