css两个div向上对

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

今天我们来学习一下CSS中两个div向上对齐的方法。 .parent { display: flex; flex-wrap: wrap; align-content: stretch; } .chil

今天我们来学习一下CSS中两个div向上对齐的方法。

  .parent {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
    }
    .child {
      flex: 1 0 auto;
    } 

以上代码中,我们首先将两个div放在一个父容器中,并设置它为flex布局,并使用wrap属性使得子元素可以自动换行。接着我们使用align-content属性来设置在交叉轴方向上的对齐方式,stretch属性可以使子元素填充整个父容器。

在子元素方面,我们使用flex属性来设置子元素的伸缩比例。其中,1代表着子元素会占用尽可能多的空间,0代表着子元素不可以缩小,auto代表着子元素的宽度会根据内容自适应。

这样,我们就可以实现两个div在交叉轴方向上的对齐了。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个div向上对

粉丝

0

关注

0

收藏

0

已有0次打赏