有一个大盒子，生了一堆小盒子。现在要把小盒子放到大盒子中，该遵循一些什么规则，才可以合理控制小盒子的位置呢？
为了保证秩序，小盒子需要排队进入大盒子。
大盒子有权限可以规定两个事
小盒子也有权限决定两件事
先说队伍的方向
可以从左到右排列，也可以从右到左排列，还可以从上到下排列，和从下往上排列。
除此之外，还可以规定，能不能换行，第二行该往哪里放。
再说队伍的对齐方式，对齐分为垂直方向对齐和水平方向对齐。
水平方向对齐，可以向队伍的开头对齐，也可以向队伍的末尾对齐，可以居中对齐，也可以左右对齐，还可以分散对齐。
垂直方向对齐，又有两种情况，即单行时和多行时。可以向顶部对齐，也可以向底部对齐，可以居中对齐，也可以上下铺满。单行时，还可以基于第一个盒子的文本底部基线对齐。多行时，可以上下对齐与分散对齐。
小盒子可以决定自己在队伍中排第几个，以及自己的大小。
小盒子有点调皮，它可以不听大盒子的垂直对齐方式，而设置自己的对齐方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.box {
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> || <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
.item {
order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
|
近期评论