flex布局

主轴:x轴方向,水平向右(行)

侧轴:y轴方向,水平向下(列)

flex-shrink:0  固定大小

1.父项

设置flex

display:flex;

主轴的方向

flex-direction:

  row(左到右)

  row-reverse(右到左)

  column(上到下)

  column-reverse(下到上)

主轴的子项的对齐方式

justify-content:

  flex-start 左对齐

  flex-end 右对齐

  center 居中

  space-between先两边,在平分

  space-around 空白环绕

换行

felx-wrap

  wrap(换行)

  nowrap(默认,不换行)

侧轴的子项的对齐方式(多行)

align-content

  flex-start(上)

  flex-end(下)

  center(中)

  space-around(空白环绕)

space-between先两边,在平分

侧轴的子项的对齐方式(单行)

align-items

  flex-start(上)

  flex-end(下)

  center(中)

2.子项

宽默认内容决定,高默认父盒子的高

默认父项设置拉伸align-item:stertch/flex-start;

设置子项占父项的宽度的份数

flex:1;

子项自己在侧轴的对齐的方式

align-self:

  flex-start(上)

  flex-end(下)

  center(中)

设置子项排列顺序

order:数字;

3.实现瀑布流布局

1.在父项

  column-count: 2; 表示有两列

2.在子项

  break-inside: avoid; 表示不分割

其他

1.父项变成伸缩盒子之后 不会对布局有影响

2.子项可以设置宽高

3.子项加浮动没有效果

4.子项加定位是有效果的

5.主轴的方向

      水平    高度默认和父元素一样高,宽由内容来撑开(控制宽度,宽度可变)

      垂直  宽度默认和父元素一样宽,高度由内容来撑开(控制高度,高度可变)