Forums

Give help. Get help.

  • # May 15, 2017 at 6:31 am

    I have a layout created and layed-out well with inline-display. Because of the spaces between inline blocks, I want to use flex box, but I cant see to get it right…

    Here is the demo of what I have done with inline-display and what I want to achieve with flex-box.

    Stackoverflow Question

    JSFiddle dEMO

    .content-section {
            position: relative;
            width: 83%;
            height: 500px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            background-color: #444;
    
    
    
            .box {
                width: auto;
                height: 100%;
                margin-right: 10px;
                display: inline-block;
    
                .current {
                    display: inline-block;
                    height: 100%;
    
                    &.small {
                        width: 200px;
                    }
    
                    &.medium {
                        width: 400px;
                    }
    
                    &.large {
                        width: 600px;
                    }
                }
    
                .next {
                    width: auto;
                    height: 100%;
                    display: inline-block;
                }
    
                .box-tool-bar {
                    height: 19px;
                    position: relative;
                    display: table;
                    width: 100%;
                    background-color: #ffffff;
                    border-bottom: 1px solid #333333;
    
                    .controls {
                        display: table-cell;
                        float: right;
    
                        i {
                            font-size: 16px;
                            cursor: pointer;
                        }
                    }
    
                    .title {
                        display: table-cell;
                        float: left;
                    }
                }
    
                .content {
                    height: calc(100% - 20px);
                    overflow-y: auto;
                    overflow-x: hidden;
                    white-space: normal;
                    background-color: #ffffff;
                    font-size: 15px;
                    color: #333333;
                    line-height: 24px;
                    padding-top: 10px;
                }
                /*&:first-child {
            margin-left: 10px;
        }*/
                &:last-child {
                    margin-right: 30%;
                }
            }
        }
    
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag