Flex-box: Align last row to grid

后端 未结 29 2515
不知归路
不知归路 2020-11-22 02:54

I have a simple flex-box layout with a container like:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

29条回答
  •  死守一世寂寞
    2020-11-22 03:24

    I know there are many answers here but.. The simplest way to do this is with a grid instead of flex and grid template columns with repeat and auto fills, where you have to set the number of pixels that you have given to each element, 100px from your snippet code.

    .exposegrid {
         display: grid;
         grid-template-columns: repeat(auto-fill, 100px);
         justify-content: space-between;
    }
     .exposetab {
         width: 100px;
         height: 66px;
         background-color: rgba(255, 255, 255, 0.2);
         border: 1px solid rgba(0, 0, 0, 0.4);
         border-radius: 5px;
         box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
         margin-bottom: 10px;
    }

提交回复
热议问题