CSS 技巧

Flexbox

Properties for the Parent

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

flex-flow is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

Properties for the Children

1
2
3
4
5
6
7
.item {
  order: 5; /* default is 0 */
  flex-grow: 4; /* default 0 */
  flex-shrink: 3; /* default 1 */
  flex-basis:  | auto; /* default auto */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

Truncate String with Ellipsis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.truncate {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

在表格中的单元格

1
2
3
4
5
6
7
8
9
10
table {
	table-layout: fixed;
}

td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
}

参考

圆角

https://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/

box-shadow

1
2
3
4
5
6
7
8
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);