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

样式初始化

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}
p{
  margin:0;
}

*,
html,
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
span,
input {
  font-family: web_PingFangSC, Microsoft Yahei;
}

span {
  display: inline-block
}
br{
  height:0;
}
li {list-style-type:none;}
// 公共样式
input ,textarea{
  outline: none;
}
textarea{
  width:100%;height:100%;border:none;
}
::-webkit-input-placeholder  { color:#cccccc; } /* Webkit */
:-moz-placeholder { color:#cccccc; }  /* Firefox <= 18 */
::-moz-placeholder { color:#cccccc; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: #cccccc; } /* Internet Explorer */


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* 文本省略 */

.text_line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text_line2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text_line3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// 禁止换行
.no_line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

flex布局

/* 弹性盒 */

.df {
  display: flex;
  display: -webkit-flex;
}
// 垂直居左
.dfac {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
// 横向居中显示
.dfjc {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}
// 垂直水平居中显示
.dfcen {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

// 平铺自动换行
.dffw {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
// 禁止换行 内容平铺展示
.dffnw {
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
}

// 垂直显示 一行一个
.dffcw {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  flex-wrap: wrap;
}

// 平铺均匀排列 每一个元素大小 间距一致
.dfsa {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
// 均匀排列 首尾贴边
.dfsb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 从行首起始位置开始排列
.dffs {
  display: flex;
  align-items: center;
  justify-content: flex-start   ;
}
// 垂直居左显示
.dffd {
  display: flex;
  flex-direction: column;
}
// 垂直倒叙显示
.dfcr {
  display: flex;
  flex-direction:column-reverse;
}
// 水平显示
.dffr {
  display: flex;
  flex-direction:row;
}
// 水平倒序显示
.dfrr {
  display: flex;
  flex-direction:row-reverse;
}


// 水平居中
.dfam {
  display: flex;
  align-items: center;
  flex-direction: column;
}
// 内容水平居中 排列展示
.dffdc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

// 自动换行
.dffj {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
}
// 自动换行 垂直居中
.dffjc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
}