将 div 块调整为整个父宽度答案

【问题标题】：Resize div block to whole parent width将 div 块调整为整个父宽度
【发布时间】：2017-02-19 13:15:03
【问题描述】：

我正在尝试缩放 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>

【问题讨论】：

flex: 1，在孩子身上。

标签： jquery css resize position flexbox

【解决方案1】：

由于padding 不包含在集合width 中，因此您的项目在较小的屏幕上将比 3:rd 更宽，通过更改此规则并使用 box-sizing，它将被包含并为 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>

【讨论】：

当点击任何一个数字时，最后一个会切换前一个，如果我点击第一个框，最后一个框会切换并且不会保持固定在他的位置。我怎样才能保持它固定而不让它切换？
@AdrianA 使用transform: scale更新了我的答案
谢谢，它有效！我添加了一些 css 来保持框子的大小，而不是使用内联 .bigger *{ transform: scale(.333,.5) ;}

【解决方案2】：

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>

【讨论】：