css和html见主轴对齐方式。

flex布局——主轴对齐方式

创建一个大盒子里面包含四个小盒子用于演示。<div class="box"> ...

给box设置flex布局

.box{
      display: flex;
    }

flex-start

垂直顶部对齐。

.box{
      align-items: flex-start;
    }

image.png

flex-end

垂直底部对齐。

.box{
      align-items: flex-end;
    }

image.png

center

垂直居中对齐。

.box{
      align-items: center;
    }

image.png

stretch

默认效果。拉伸至与父盒子同等高度。

.box{
      align-items:stretch;
    }

image.png

最后修改：2022 年 08 月 10 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏