CSS Flex Box Layout: full-width row and columns

后端 未结 3 1696
囚心锁ツ
囚心锁ツ 2021-02-06 20:06

Hello fellow programmers!

I\'ve got a simple box-layout which I would love to achieve using flexbox, but I simply can\'t figure it out. It should look like this image.

3条回答
  •  北恋
    北恋 (楼主)
    2021-02-06 20:53

    Just use another container to wrap last two divs. Don't forget to use CSS prefixes.

    #productShowcaseContainer {
       display: flex;
       flex-direction: column;
       height: 600px;
       width: 580px;
       background-color: rgb(240, 240, 240);
    }
    
    #productShowcaseTitle {
       height: 100px;
       background-color: rgb(200, 200, 200);
    }
    
    #anotherContainer{
       display: flex;
       height: 100%;
    }
    
    #productShowcaseDetail {
       background-color: red;
       flex: 4;
    }
    
    #productShowcaseThumbnailContainer {
       background-color: blue;
       flex: 1;
    }
    1
    2
    3

提交回复
热议问题