フレックス外側の埋め込み

Question

フレックスの外側の列にパディングを設定するにはどうすればいいですか？私はブートストラップを使用していますが、col-md-offset-1などを設定したくありません。

現在、padding: 0 50px;を.rowまたは.flexに設定した場合、列の高さは同じになりません。

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>

Answer 1

かわりpaddingのmarginを使用することができますし、列を同じ高さを得るために、あなたはまた、多分あなたはメディアクエリDEMO

にそれを置きたい .col-md-4 DEMOに display: flexを使用することができます

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