Flex display does not work with CSS property

Asked

Viewed 781 times

1

I am unable to use the following Ivs with the properties:

.grid {
  display: block;
}

@media (min-width: 992px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
}

.column.left {
  flex: 4;
  background-color: red;
}

.column.right {
  flex: 8;
  background-color: blue;
}

I realized that if I remove this:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

works perfectly, but if I let it doesn’t work, the problem is that I need the box-Sizing

<main class="main">
      <section class="section">
        <div class="container">
          <div class="grid">
            <div class="column left">a</div>
            <div class="column right">a</div>
          </div>
        </div>
      </section>
    </main>
html css

  • Put HTML in question also that facilitates.

  • @ready dvd added

  • face, that I know the Bootstrap already has by default the border-box in the elements. I tested here and I saw no different behavior.

  • but I’m not wearing bootstrap

1 answer

1


Hello, I had the same problem with a template and solved by inserting a class as the example: 

<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
    <style>
    .display_flex {
        display: flex;
        flex-flow: row wrap;
    }
    </style>
</head>
<body>
    <div class=" row display_flex">
        <div class="col-md-4 col-xs-12 col-sm-6">
             <div class="box box-success">
                  <div class="box-header with-border">
                  </div>
             </div>            
        </div>      
    </div>
</body>
</html>

The recommendation is for this class in the same <div> of row. Could be configured in the row but this could affect other parts. This class can be inserted into the file style "general".

  • But he’s not using Bootstrap, nor has class with ROW name in his code...

  • @hugocsl In this case he would insert the class display_flex in the div of the grid class.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.