常用css布局

一、Flex布局

1 父组件属性

1.1 justify-content：控制子元素在主轴上的布局。

• flex-start: 子元素靠主轴起点对齐。
• flex-end: 子元素靠主轴末尾对齐。
• center: 子元素靠主轴居中对齐。
• space-between: 子元素在主轴上均匀分布，首位不留空隙。
• space-around：子元素在主轴上均匀分布，首尾有空隙，子元素间的间距是首尾元素距离边缘的两倍。
• space-evenly: 子元素在主轴上均匀分布，首尾有空隙，子元素间的间距与首尾元素距离边缘相等。

1.2 align-items：控制子元素在交叉轴上的布局。

• flex-start: 子元素在交叉轴起点对齐。
• flex-end: 子元素在交叉轴末尾对齐。
• center: 子元素在交叉轴居中对齐。
• baseline: 子元素在交叉轴上按基线对齐（如果子元素有不同的文本基线，会根据基线对齐）。
• stretch: 子元素将被拉伸以填满交叉轴的整个空间。

二、绝对布局

场景示例：在一个flex布局的组件内部，添加一个始终位于右下角的图标。
并且该图标位于其它组件的上层。

// 父组件样式
.container {
    // 父组件原有的flex相关样式
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  
    // 要让右下角的子组件相对于本父组件进行定位需要设置父组件的position为relative.
    position: relative;
}

// 子组件样式
.corner {
  // 位于右下角的样式设置
  position: absolute;
  bottom: 0;
  right: 0;
  
  // 其它样式设置
  background-color: blue;
  width: 20px;
  height: 20px;
}