将 div 块调整为整个父级宽度

Question

我正在尝试缩放 flexbox 中的 div 以适应整个父项 div，我可以部分地做到这一点，但是有一些复杂的问题，比如当我缩放它时，最后一个父项需要它放置并向左移动一列，我如何才能将其置于固定位置，以便可缩放 div 仅缩放而不触发其他移动？我需要它能够适应所有宽度和高度。这是我的代码：

$(document).ready(function() {
 
 $('.div_service').click(function(event) {

   $(this).toggleClass('bigger');
 });


});

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  padding: 0;
  margin: 0; }

body {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  background-color: #1C1C1C; }

.div_services {
  /* padding: 10%; */
  margin: 10% auto;
  top: 15%;
  position: relative;
  width: 90%; }
  .div_services_sub {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    border-collapse: collapse;
    text-align: center;
    border-spacing: 0px;
    border-collapse: collapse;
    width: 100%;
    position: relative; }
    .div_services_sub .bigger {
      transition: all 0.5s ease;
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      z-index: 99;
      padding: 0 !important;
      margin: 0 !important; }
    .div_services_sub .div_service {
      border: 2px solid #FEC70B;
      padding: 60px 5px;
      background-color: #000000;
      color: #FEC70B;
      width: 32%;
      height: 100px; }
      .div_services_sub .div_service a {
        position: relative;
        padding: 10px;
        margin: 10px 0;
        text-decoration: none;
        color: #FEC70B; }
      .div_services_sub .div_service a:hover {
        color: white; }

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_services">
 <div class="div_services_sub 1" >
   <div class="div1 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4>
    <a  class="readmore" href="#" title="">Read more...</a> 
   </div>
   <div class="div2 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtu</h4>
    <a class="readmore"  href="#" title="">Read more...</a>
   </div>
   <div class="div3 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtit.</h4>
    <a class="readmore"  href="#" title="">Read more...</a> 
   </div>
    <div class="div4 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivti.</h4>
    <a class="readmore"  href="#" title="">Read more...</a>
    </div>
    <div class="div5 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt/h4>
    <a class="readmore"  href="#" title="">Read more...</a>
    </div>
    <div class="div6 div_service">
    <h3>Title</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4>
    <a  class="readmore" href="#" title="">Read more...</a> 
    </div>

 </div>
</div>

Answer 1

Please change the css..

<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  padding: 0;
  margin: 0; }

body {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  background-color: #1C1C1C; }

.div_services {
  /* padding: 10%; */
  margin: 10% auto;
  top: 15%;
  position: relative;
  width: 70%; }
  .div_services_sub {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    border-collapse: collapse;
    text-align: center;
    border-spacing: 0px;
    border-collapse: collapse;
    width: 100%;
    position: relative; }
    .div_services_sub .bigger {
      transition: all 0.5s ease;
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      z-index: 99;
      padding: 0 !important;
      margin: 0 !important; }
    .div_services_sub .div_service {
      border: 2px solid #FEC70B;
      padding: 60px 5px;
      background-color: #000000;
      color: #FEC70B;
      width: 48%;
      height: 100px; }
      .div_services_sub .div_service a {
        position: relative;
        padding: 10px;
        margin: 10px 0;
        text-decoration: none;
        color: #FEC70B; }
      .div_services_sub .div_service a:hover {
        color: white; }

/*# sourceMappingURL=style.css.map */
</style>

Answer 2

由于 padding 未包含在集合 width 中，您的项目在较小的屏幕上将比 3:rd 宽，通过更改此规则并使用 box-sizing , 它将被包含并留下 space 3 项

.div_services_sub .div_service {
  border: 2px solid #FEC70B;
  padding: 60px 5px;
  background-color: #000000;
  color: #FEC70B;
  width: 32%;
  /* height: 100px;                   removed  */
  box-sizing: border-box;     /*      added    */
}

已更新

我也把你的 transition 改成了 transform: translate。这样动画看起来好多了

$(document).ready(function() {

  $('.div_service').click(function(event) {

    $(this).toggleClass('bigger');
  });


});

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  background-color: #1C1C1C;
}

.div_services {
  /* padding: 10%; */
  margin: 10% auto;
  top: 15%;
  position: relative;
  width: 90%;
}

.div_services_sub {
  display: flex;
  flex-flow: row wrap;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  position: relative;
}
.div_services_sub .div_service {
  transition: transform 0.5s ease;
}
.div_services_sub .div1 {
  transform-origin: top left;
}
.div_services_sub .div2 {
  transform-origin: top center;
}
.div_services_sub .div3 {
  transform-origin: top right;
}
.div_services_sub .div4 {
  transform-origin: bottom left;
}
.div_services_sub .div5 {
  transform-origin: bottom center;
}
.div_services_sub .div6 {
  transform-origin: bottom right;
}

.div_services_sub .bigger {
  z-index: 99;
  transform: scale(3,2);
}

.div_services_sub .div_service {
  border: 2px solid #FEC70B;
  padding: 60px 5px;
  background-color: #000000;
  color: #FEC70B;
  width: 32%;
  box-sizing: border-box;
}

.div_services_sub .div_service a {
  position: relative;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  color: #FEC70B;
}

.div_services_sub .div_service a:hover {
  color: white;
}


/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="div_services">
  <div class="div_services_sub 1">
    <div class="div1 div_service">
      <h3>Title1</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4>
      <a class="readmore" href="#" title="">Read more...</a>
    </div>
    <div class="div2 div_service">
      <h3>Title2</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtu</h4>
      <a class="readmore" href="#" title="">Read more...</a>
    </div>
    <div class="div3 div_service">
      <h3>Title3</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtit.</h4>
      <a class="readmore" href="#" title="">Read more...</a>
    </div>
    <div class="div4 div_service">
      <h3>Title4</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivti.</h4>
      <a class="readmore" href="#" title="">Read more...</a>
    </div>
    <div class="div5 div_service">
      <h3>Title5</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4>
        <a class="readmore" href="#" title="">Read more...</a>
    </div>
    <div class="div6 div_service">
      <h3>Title6</h3>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4>
      <a class="readmore" href="#" title="">Read more...</a>
    </div>

  </div>
</div>

将 div 块调整为整个父级宽度

Resize div block to whole parent width

css

jquery

resize

position

flexbox