CODEWITHSUNDEEP
csstwitter-bootstrapflexbox
Marko
Marko

Reputation: 1487

Padding outside flex

How can I set padding on flex outside columns - left and right, if I want columns to be more to inside? I am using Bootstrap, but I wouldn't like to set col-md-offset-1 or similar.

Currently if I set padding: 0 50px; on .row or on .flex, columns won't have the same height.

http://codepen.io/anon/pen/ZWPzOp

.row {
  padding: 0 50px;
  background-color: #333;
}
.flex {
  display: flex;
  display: -webkit-flex;
  /* Safari */
  justify-content: space-around;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
}
.col-md-4 {} 

.col-inside {
  background-color: #aaa;
  padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">
    <div class="flex">

      <div class="col-md-4">
        <div class="col-inside">
          <p>lorem asdf pdsfpds asdf pdsfpdsa fd asdf pdsfpdsa fda f asdf pdsfp asdf pdsfpdsa fd asdf pdsfpdsa fddsa fd asdf pdsfpdsa fdds</p>
        </div>
      </div>


      <div class="col-md-4">
        <div class="col-inside">
          <p>lorem a asdf pdsfpdsa asdf pdsfpdsa fd asdf pdsfpdsa fdasdf pdsfpdsa fd fdsdf asdf pdsfpdsa fdpdsfp asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsf asdf pdsfpdsa fd as asdf pdsfpdsa fd asdf pdsfpdsa fddf pdsfpdsa fd asdf pdsfpdsa fdpdsa fd asdf
            pdsfpdsa fd asdf pdsfpdsa fddsa fds</p>
        </div>
      </div>


      <div class="col-md-4">
        <div class="col-inside">
          <p>lorem asd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pds asdf pdsfpdsa fdfpdsa asdf pdsfpdsa fd asdf p asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fd asdf pdsfpdsa fddsfpdsa fd asdf pdsfpdsa fdfdf pdsfpdsa fds</p>
        </div>
      </div>

    </div>
  </div>
</div>

Upvotes: 1

Views: 1405

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use margin instead of padding and to get columns same height you can use display: flex on .col-md-4 DEMO also maybe you want to put that in media query DEMO

.col-md-4 {
  margin: 0 20px;
  display: flex;
}
.col-inside {
  background-color: #aaa;
  padding: 20px;
}

Upvotes: 1

Related Questions