我正在尝试在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>
答案 0 :(得分：0)
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>
答案 1 :(得分：0)
由于struct LIST {
char *word;
struct LIST *next;
};
typedef struct Node {
char letter;
struct LIST *words;
struct Node *left;
struct Node *right;
} Node;
未包含在集padding中，您的项目将比较小屏幕上的3：rd宽，通过更改此规则并使用width，它将是包括并留出3个项目的空间
box-sizing<强> 更新
我还将您的.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 */