gpt4 book ai didi

html - 将行布局折叠到较小宽度的列,而不会丢失前一个元素的边距顶部

转载 作者:行者123 更新时间:2023-12-03 20:48:09 27 4
gpt4 key购买 nike

目标
我正在尝试完成以下任务:

  • 当屏幕足够宽时,.firstItem (红色)和 .lastItem (蓝色)元素,其宽度事先未知 , 位于父项的左右部分 .layout分别。


  • 当屏幕变窄并且元素之间的水平间距减小到 $minimalHorizontalSpaceBetweenItems 时,布局折叠为列,但 .firstItem仍然有理由向左和.lastItem向右:


  • 元素之间的垂直空间 $verticalSpaceBetweenItems不得影响单行配置中的布局。
  • 下面是黄色的 CSS 规则 .preceedingElement块上方.firstItem.lastItem必须工作:

  • .preceedingElement + .layout {
    margin-top: Npx;
    }
    基本 MWE
    <div class="preceedingElement"></div>
    <div class="layout">
    <div class="firstItem"></div>
    <div class="lastItem"></div>
    </div>
    社会保障:
    .preceedingElement{
    width: 100%;
    height: 30px;
    background: #FAD7A0;
    }

    @mixin TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 0,
    $verticalSpaceBetweenItems: 0
    ) {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    margin-top: -$verticalSpaceBetweenItems;
    margin-right: -$minimalHorizontalSpaceBetweenItems;


    > *{
    margin-top: $verticalSpaceBetweenItems;
    margin-right: $minimalHorizontalSpaceBetweenItems;

    &:last-child {
    margin-left: auto;
    }
    }
    }

    .layout {
    @include TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 12px,
    $verticalSpaceBetweenItems: 24px
    )
    }

    .firstItem {
    width: 200px;
    height: 34px;
    background: #EC7063;
    }

    .lastItem {
    width: 400px;
    height: 24px;
    background: #7FB3D5;
    }
    Flex 解决方案尝试
    在SASS mixin下面实现了除第四个之外的所有目标:
    @mixin TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 0,
    $verticalSpaceBetweenItems: 0
    ) {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    margin-top: -$verticalSpaceBetweenItems;
    margin-right: -$minimalHorizontalSpaceBetweenItems;


    > *{
    margin-top: $verticalSpaceBetweenItems;
    margin-right: $minimalHorizontalSpaceBetweenItems;

    &:last-child {
    margin-left: auto;
    }
    }
    }
    干扰是 margin-top: -$verticalSpaceBetweenItems;对于 parent 和 margin-top: $verticalSpaceBetweenItems;给 child 。
    🌎 JS Fiddle
    网格解决方案尝试
    网格始终呈现 2 行。
    @mixin TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 0,
    $verticalSpaceBetweenItems: 0
    ) {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, auto));
    grid-gap: $verticalSpaceBetweenItems $verticalSpaceBetweenItems;

    align-items: center;


    >* {

    &:first-child {
    justify-self: start;
    }

    &:last-child {
    justify-self: end;
    }
    }

    最佳答案

    您的 flexbox 方法似乎工作得很好...正在更改 margin-top: $verticalSpaceBetweenItems;margin-bottom: $verticalSpaceBetweenItems;应该解决要求 #4,并且您的原始 flexbox 代码已经解决了前三个问题。
    JSFiddle:https://jsfiddle.net/yx689sh4/

    关于html - 将行布局折叠到较小宽度的列,而不会丢失前一个元素的边距顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64588075/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com