分类 HTML / CSS 下的文章

justify-content

将flex元素和主轴对齐。
flex-start flex-end center space-between space-around

  • flex-start: 元素和容器的左端对齐。
  • flex-end: 元素和容器的右端对齐。
  • center: 元素在容器里居中。
  • space-between:元素之间保持相等的距离。
  • space-around:元素周围保持相等的距离。
#pond {
    display: flex;
    justify-content: flex-end;
}

align-items

在交叉轴上对齐多个元素
flex-start flex-end center baseLine stretch

  • flex-start: 元素与容器的顶部对齐。
  • flex-end: 元素与容器的底部对齐。
  • center: 元素纵向居中。
  • baseline: 元素在容器的基线位置显示。
  • stretch: 元素被拉伸以填满整个容器。
#pond {
    display: flex;
    align-items:flex-end
}

- 阅读剩余部分 -