美文网首页
前端通用样式(flex)

前端通用样式(flex)

作者: 遇见wn | 来源:发表于2023-02-02 09:16 被阅读0次

.ellipsis1 {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

}

.ellipsis2 {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

}

.ellipsis3 {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

}

.flex_items_center {

    display: flex;

    align-items: center;

}

.flex_items_start {

    display: flex;

    align-items: flex-start;

}

.flex_items_end {

    display: flex;

    align-items: flex-end;

}

.flex_content_btw {

    display: flex;

    justify-content: space-between;

}

.flex_content_around {

    display: flex;

    justify-content: space-around;

}

.flex_content_center {

    display: flex;

    justify-content: center;

}

.flex_content_end {

    display: flex;

    justify-content: flex-end;

}

.flex_content_start {

    display: flex;

    justify-content: flex-start;

}

.flex_all_center {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.flex_clm {

    display: flex;

    flex-direction: column;

}

.flex_res {

    display: flex;

    flex-direction: reverse;

}

.flex_warp {

    display: flex;

    flex-wrap: wrap;

}

.flex1 {

    display: flex;

    flex: 1;

}

相关文章

  • flex: 1对table样式的影响

    flex: 1对table样式的影响 table父元素是一个div,div有flex: 1的样式,这个样式很可能会...

  • flex

    display:flex 设置块级元素inline-flex 设置行内元素 弹性容器样式 flex-directi...

  • Bootstrap中的弹性布局(flex)

    使用.d-flex和.d-inline-flex实现开启flex布局样式; .flex-row可以呈现子元素水平方...

  • flex布局 定义 项目样式初始化

    样式初始化 flex布局

  • CSS(flex)

    父元素样式 子元素样式 参考 CSS Flexible Box Layout box-flex

  • 弹性盒模型

    弹性盒模型 由父元素控制子元素布局的方案,需要给父元素添加flex样式,任意元素都可添加flex样式 displa...

  • flex布局

    给容器加 display:flex 样式 容器的属性: 1. flex-direction: row | row-...

  • Flex布局

    定义容器的display属性 容器样式 主轴方向(flex-direction) 换行(flex-wrap) 主轴...

  • 前端开发规范(jk)

    前端开发规范 一、通用规范 1、TAB键用两个空格代替 2、CSS样式属性或者JAVASCRIPT代码后统一不加“...

  • flex 平均分布 换行对齐 文件管理器宫格布局

    如何可以使用flex布局 进行平均分布,又可以换行呢?第一步:设置flex容器元素样式display: flex;...

网友评论

      本文标题:前端通用样式(flex)

      本文链接:https://www.haomeiwen.com/subject/fkyihdtx.html