flex和部分css的学习

flex学习

flex:1

flex-grow: 1;(拉伸)    flex-shrink: 1;(收缩)    flex-basis: 0%;（初始化项目尺寸）

有时候发现flex:1 并不能均分 需要加一行内容设置宽度

{
	flex:1;
    min-width:0;
}

flex-basis的优先级比width高

flex-basis` 值显式设置了为 `0%` ，这个时候浏览器会将 Flex 项目的内容最小尺寸，即 `min-content`

文字过长的处理

.long-word {
  overflow-wrap: break-word;
}

/* ② 文本截取，末尾添加 ... */
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ③ 多行文本截取，末尾添加... */
.line-clamp {
  --line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
}