0

I am making a grid system which I am building with the flex class. It is my first time working with flex, so I am not quite sure how it is functioning yet.

The grid I have made until now is looking like this.

I would like the flexbox item 6 is looking like the below picture:

Flexbox item 6

At the moment item 5 and item 6 is taking 50% width each

The item5 and item6 is taking 50% width. I cannot seem to change that. I would like that item 5 is taking around 66% and item 6 is taking 33%, but still have the margin around the elements.

Can somebody see what I am doing wrong?

<style>

.d-flex {
  display: -ms-flexbox!important;
  display: flex!important
}

.d-inline-flex {
    display: -ms-inline-flexbox!important;
    display: inline-flex!important
}
.flex-wrap {
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important
}
.bg-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat; }

/* CTA Buttons */

.btn-top-left {
  position: absolute;
  left: 10%;
  top: 10%
}

.btn-top-right {
  
}

.btn-center {
  position: absolute;
  left: 50%;
  top: 50%
}

.btn-bottom-left {
  
}

.btn-bottom-right {
  
}


/* :: Set overlay over image and placement of text */
.single-welcome-post {
  position: relative;
  z-index: 1; }
  .single-welcome-post::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    content: '';
    z-index: 5; }
  .single-welcome-post .welcome-post-content {
    position: absolute;
    z-index: 100;
    left: 50px;
    bottom: 50px;
    right: 50px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .single-welcome-post .welcome-post-content {
        left: 20px;
        bottom: 20px;
        right: 20px; } }
    @media only screen and (max-width: 767px) {
      .single-welcome-post .welcome-post-content {
        left: 15px;
        bottom: 15px;
        right: 15px; } }
  .single-welcome-post.style-2 {
    height: 645px; }
 

 

.hero-area {
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  padding: 5px; }
  .hero-area .hero-single-section {
    position: relative;
    z-index: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%; }
    @media only screen and (max-width: 767px) {
      .hero-area .hero-single-section {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%; } }
  .hero-area .item1 {
    height: 700px;
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item1 {
        height: 600px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item1 {
        height: 500px; } }
    @media only screen and (max-width: 767px) {
      .hero-area .item1 {
        height: 350px; } }
  .hero-area .item2 {
    height: 340px;
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item2 {
        height: 290px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item2 {
        height: 240px; } }
    @media only screen and (max-width: 767px) {
      .hero-area .item2 {
        height: 200px; } }
  .hero-area .item3 {
    height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    width: calc(50% - 10px);
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item3 {
        height: 300px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item3 {
        height: 250px; } }
    @media only screen and (max-width: 767px) {
      .hero-area .item3 {
        height: 200px; } }
  .hero-area .item4 {
    height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    width: calc(50% - 10px);
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item4 {
        height: 300px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item4 {
        height: 250px; } }
    @media only screen and (max-width: 767px) {
      .hero-area .item4 {
        height: 200px; } }

  .hero-area .item5 {
    height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    max-width: calc(130% - 10px);
    width: calc(130% - 10px);
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item5 {
        height: 300px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item5 {
        height: 250px;
        max-width: calc(100% - 10px); } }
    @media only screen and (max-width: 767px) {
      .hero-area .item5 {
        height: 200px; 
        max-width: calc(100% - 10px); } }

.hero-area .item6 {
    height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    max-width: calc(100% - 10px);
    width: calc(100% - 10px);
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item6 {
        height: 300px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item6 {
        height: 250px;
        max-width: calc(100% - 10px); } }
    @media only screen and (max-width: 767px) {
      .hero-area .item6 {
        height: 200px; 
        max-width: calc(100% - 10px); } }

.hero-area .item7 {
    height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    max-width: calc(100% - 10px);
    width: calc(100% - 10px);
    margin: 5px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .hero-area .item7 {
        height: 300px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .hero-area .item7 {
        height: 250px;
        max-width: calc(100% - 10px); } }
    @media only screen and (max-width: 767px) {
      .hero-area .item7 {
        height: 200px; 
        max-width: calc(100% - 10px); } }



.single-blog-post {
  position: relative;
  z-index: 1; }
  .single-blog-post .blog-thumb {
    position: relative;
    z-index: 1; }
    .single-blog-post .blog-thumb img {
      width: 100%; }
  .single-blog-post .blog-content .post-tag {
    color: #a6a6a6;
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    font-weight: 700;
    margin-bottom: 5px; }
    .single-blog-post .blog-content .post-tag:hover, .single-blog-post .blog-content .post-tag:focus {
      color: #ff1662; }

    /* Set font-size */
    @media only screen and (max-width: 767px) {
      .single-blog-post .blog-content .post-tag {
        font-size: 10px; } }
  .single-blog-post .blog-content .post-title {
    font-weight: 600;
    font-size: 30px;
    display: block;
    color: #282828;
    margin-bottom: 10px; }
    
  

    /* Align text */
    @media only screen and (max-width: 767px) {
      .single-blog-post .blog-content .post-title {
        font-size: 16px; } }
    .single-blog-post .blog-content .post-title:hover, .single-blog-post .blog-content .post-title:focus {
      color: #ff1662; }
  .single-blog-post .blog-content .post-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

    /* Set space between text elements*/
    .single-blog-post .blog-content .post-meta a {
      color: #ffffff;
      margin-right: 15px;
      font-size: 11px;
      line-height: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      -ms-grid-row-align: flex-end;
      align-items: flex-end; }
    

      /* Set color and placement on text*/
      @media only screen and (max-width: 767px) {
        .single-blog-post .blog-content .post-meta a {
          font-size: 8px;
          margin-right: 5px; } }
      .single-blog-post .blog-content .post-meta a img {
        margin-right: 10px; }
      .single-blog-post .blog-content .post-meta a:last-child {
        margin-right: 0; }
      .single-blog-post .blog-content .post-meta a:hover, .single-blog-post .blog-content .post-meta a:focus {
        color: #ff1662; }
  .single-blog-post.white .blog-content .post-title,
  .single-blog-post.white .blog-content .post-tag,
  .single-blog-post.white .blog-content .post-meta a {
    color: #ffffff; }
    .single-blog-post.white .blog-content .post-title:hover, .single-blog-post.white .blog-content .post-title:focus,
    .single-blog-post.white .blog-content .post-tag:hover,
    .single-blog-post.white .blog-content .post-tag:focus,
    .single-blog-post.white .blog-content .post-meta a:hover,
    .single-blog-post.white .blog-content .post-meta a:focus {
      color: #008ebe; }
  .single-blog-post.style2 .blog-content .post-title {
    font-size: 24px; }



/* Sidebar Nyhedsbrev */
.sidebar-area {
  position: relative;
  z-index: 1; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar-area {
      margin-top: 100px; } }
  @media only screen and (max-width: 767px) {
    .sidebar-area {
      margin-top: 100px; } }

.single-widget-area {
  position: relative;
  z-index: 1; }
  .single-widget-area.newsletter-widget {
    background-color: #f0f4f8;
    padding: 50px 20px;
    text-align: center; }
    .single-widget-area.newsletter-widget h4 {
      margin-bottom: 25px; }
    .single-widget-area.newsletter-widget form input {
      text-align: center;
      width: 100%;
      background-color: #d4dfe3;
      height: 54px;
      font-size: 12px;
      font-style: italic;
      color: #4c4c4c;
      border: none;
      margin-bottom: 15px; }
    .single-widget-area.newsletter-widget p {
      font-size: 12px;
      font-style: italic; }
  .single-widget-area.news-widget h4 {
    margin-bottom: 60px; }
</style>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ##### Hero Area Start ##### -->
    <div class="hero-area d-flex flex-wrap">

        <div class="hero-single-section">
            <!-- Single Welcome Post -->
            <div class="single-welcome-post bg-img item1" style="background-image: url(http://vouzalis.dk/stack/1.jpg);">
                <!-- Content -->
                <a href="https://www.youtube.com/watch?v=0aNNYEUARAk" class="video-play-btn"><i class="fa fa-play"></i></a>
                <!-- Content -->
                <div class="welcome-post-content">
                    <!-- Single Blog Post -->
                    <div class="single-blog-post white">
                        <div class="blog-content">
                            <a href="#" class="post-tag">Featured</a>
                            <a href="#" class="post-title">Watch a tiny cat taking a bath</a>
                            <div class="post-meta">
                                <a href="#">Here is a text about the picture</a>
                            </div>
                            <button href="#" class="btn btn-success btn-center">Read More</button>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

        <div class="hero-single-section">
            <!-- Single Welcome Post -->
            <div class="single-welcome-post bg-img item2" style="background-image: url(http://vouzalis.dk/stack/2.jpg);">
                <!-- Content -->
                <div class="welcome-post-content">
                    <!-- Single Blog Post -->
                    <div class="single-blog-post white">
                        <div class="blog-content">
                            <a href="#" class="post-tag">Featured</a>
                            <a href="#" class="post-title">Spain: Take a virtual tour</a>
                            <div class="post-meta">
                                <a href="#"> Her er en tekst</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

            <div class="hero-second-section d-flex flex-wrap">
                <!-- Single Welcome Post -->
                <div class="single-welcome-post bg-img item3" style="background-image: url(http://vouzalis.dk/stack/3.jpg);">
                    <!-- Content -->
                    <div class="welcome-post-content">
                        <!-- Single Blog Post -->
                        <div class="single-blog-post style2 white">
                            <div class="blog-content">
                                <a href="#" class="post-tag">Featured</a>
                                <a href="#" class="post-title">5 Tips to create your garden</a>
                            </div>
                        </div>
                    </div>
                    
                </div>

                <!-- Single Welcome Post -->
                <div class="single-welcome-post bg-img item4" style="background-image: url(http://vouzalis.dk/stack/4.jpg);">
                    <!-- Content -->
                    <div class="welcome-post-content">
                        <!-- Single Blog Post -->
                        <div class="welcome-post-content">
                        <!-- Single Blog Post -->
                            <div class="single-blog-post style2 white">
                                <div class="blog-content">
                                    <a href="#" class="post-tag">Featured</a>
                                    <a href="#" class="post-title">10 Movies you need to see</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-single-section">
            <!-- Single Welcome Post -->
            <div class="single-welcome-post bg-img item5" style="background-image: url(http://vouzalis.dk/stack/1.jpg);">
                <!-- Content -->
                <a href="https://www.youtube.com/watch?v=0aNNYEUARAk" class="video-play-btn"><i class="fa fa-play"></i></a>
                <!-- Content -->
                <div class="welcome-post-content">
                    <!-- Single Blog Post -->
                    <div class="single-blog-post white">
                        <div class="blog-content">
                            <a href="#" class="post-tag">Featured</a>
                            <a href="#" class="post-title">Watch a tiny cat taking a bath</a>
                            <div class="post-meta">
                                <a href="#">Here is a text about the picture</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="hero-single-section">
            <!-- Single Welcome Post -->
            <div class="single-welcome-post bg-img item6" style="background-image: url(http://vouzalis.dk/stack/2.jpg);">
                <!-- Content -->
                <a href="https://www.youtube.com/watch?v=0aNNYEUARAk" class="video-play-btn"><i class="fa fa-play"></i></a>
                <!-- Content -->
                <div class="welcome-post-content">
                    <!-- Single Blog Post -->
                    <div class="single-blog-post white">
                        <div class="blog-content">
                            <a href="#" class="post-tag">Featured</a>
                            <a href="#" class="post-title">Watch a tiny cat taking a bath</a>
                            <div class="post-meta">
                                <a href="#">Here is a text about the picture</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
<!-- ##### Hero Area end ##### -->
TylerH
  • 20,799
  • 66
  • 75
  • 101
McDuck4
  • 662
  • 1
  • 10
  • 33
  • *i am making a grid system which I am building with the flex class* why not just use grid properties? Either way you’ve set the `max-width` of `.hero-area` to 50% so how will it and the items in that container ever go to 66%? – soulshined Feb 21 '19 at 14:24
  • But no matter if you change the 50% the position of item5 will still be the same, so they are overlapping. – McDuck4 Feb 21 '19 at 14:30
  • 1
    if you want grid layout, use css grids which will make your job a lot easier than using flexbox to create a grid like you want. – Yousaf Feb 21 '19 at 14:32
  • Thank you. I can see other people also suggest that. – McDuck4 Feb 21 '19 at 14:35

2 Answers2

2

Percentages in width are not something I'd use. I'd wrap the last 2 elements into another div, make it flex and then add flex:1; to the first element and flex:2; to the second for this particular screen width.

This will also make the widths responsive. Bottom line is, avoid percentages, use flex: property with flexbox items.

.wrapper {
  width: 100%;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one {
  min-height: 150px;
  flex: 2;
  background: red;
}

.two {
  min-height: 150px;
  flex: 1;
  background: green;
}
<div class="wrapper">
  
  <div class="one"></div>
  <div class="two"></div>
  
</div>
Varin
  • 2,354
  • 2
  • 20
  • 37
  • 1
    Exactly my answer, https://jsfiddle.net/a1k358ud/ – Ashwin Feb 21 '19 at 14:32
  • 1
    Thank you for the answer. I did not work with the CSS grid before, so I need to start learn that. I was just so happy because I managed to make the flexboxes, instead of using Bootstrap all the time. – McDuck4 Feb 21 '19 at 14:35
  • Css Grid and FlexBox are two different things though. Grid was added relatively recently to CSS, but I personally prefer FlexBox and use it everywhere. It's bit tricky at the begining, but as soon as you get a grip, you won't go back. If you ever venture into React-Native, you'll be happy to know that it uses FlexBox as default for everything. – Varin Feb 21 '19 at 14:42
  • @Varin "recently" is a relative term... CSS Grid layout has been around [since 2012](https://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/). – TylerH Feb 21 '19 at 14:48
  • @TylerH yes, you're right. It only recently has been widely supported by browsers, which in most cases means that it is then ok to use it in production due to compatibility. – Varin Feb 21 '19 at 14:56
  • @McDuck4 If this helped you, please consider accepting the answer :) – Varin Feb 21 '19 at 19:47
0

You can solve this in bootstrap like this

.vh-100 {
height:100vh
}

.vh-50 {
height:50vh
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-6 bg-dark vh-100">
    </div>

    <div class="col-6 vh-100 bg-danger">
        <div class="row">
            <div class="col-6 vh-50 bg-primary">
            </div>
            <div class="col-6 vh-50 bg-warning">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-8 bg-success vh-100">
    </div>

    <div class="col-4 vh-100 bg-info">
    </div>
</div>
  • Hi and welcome to Stack Overflow; please add some explanation for why/how this code solves the problem; don't make OP guess at what's different and why the changes work. – TylerH Feb 21 '19 at 14:47