如何在设定位置扩展DIV以适应设定区域，而无需重新定位？

Question

我能解释我的问题的最佳方式是我在下面发布的图片。基本上当你增加一个对象宽度的数量时，它会向右扩展（见图1），我知道你可以通过在css定位中添加一些更改使它向左扩展，但是我需要我的div扩展一个左边一点点，右边一点点，能够在某个位置占据一定的空间。（见下图2）
发生什么事（我最接近的AKA） ：

图1：

我想要发生什么（填满整个区域）：

图2：

基本上我想知道如何实现图2中发生的事情

Answer 1

尝试：

 .div {
    width: someWidth;
    margin: 0 auto;
}

Answer 2

使用flexbox可以很容易地实现这一点。

在您的父元素中使用align-items: flex-end; display: flex;和justify-content: center;。然后定义子维度。

align-items: flex-end;：将元素垂直放置在横轴的末端。

justify-content: center;：使元素在主轴中水平居中。

<强> JSFIDDLE

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.flex-container {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  height: 100vh;
  border: .5em dashed black;
  background-color: lightgreen;
}
.flex-item {
  flex-basis: 3em;
  height: 3em;
  background-color: dodgerblue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

修改

这是另一个演示，供您查看更改子元素尺寸时的行为方式。 （单击蓝色方块以切换尺寸更改）。

<强> JSFIDDLE

$(".flex-item").on("click", function() {
  $(this).toggleClass("flex-item--big");
});

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.flex-container {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  height: 100vh;
  border: .5em dashed black;
  background-color: lightgreen;
}
.flex-item {
  flex-basis: 3em;
  height: 3em;
  background-color: dodgerblue;
  transition: flex-basis 300ms linear, height 300ms linear;
  cursor: pointer;
}
.flex-item--big {
  flex-basis: 10em;
  height: 10em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item"></div>
</div>

编辑2：

在评论中提到的一些规范之后，这里可以做些什么。

  

要调整flex项目之间的“边距”，您需要将其设为a   稍微复杂一点，将每个项目包装在容器中并添加   填充，这不在以下演示的范围内。

Notes＆amp;建议：

• 尽量避免元素中的宽度和高度变化，您应该在过渡和动画中坚持transform和opacity。
• 尝试让您的过渡速度更快，介于300毫秒和500毫秒之间

的 DEMO

CODE SNIPPET

function panels() {
  /* jQuery Objects */
  var $panelsContainer = $(".panels-container"),
    $panel = $(".panel"),

    /* Strings of Classes used */
    cHasPanelOpened = "has-panel-opened",
    cHoverEffect = "panel-hover-effect",
    cOpened = "opened",
    cLastClicked = "last-clicked",
    cFaded = "faded";

  /* Panel click event listener */
  $panel.on("click", function() {
    $panelsContainer
      .toggleClass(cHasPanelOpened);

    $(this)
      .toggleClass([cHoverEffect, cOpened].join(" "))
      .addClass(cLastClicked);

    $panel.not(this)
      .toggleClass(cFaded)
      .removeClass(cLastClicked);
  });
}

$(document).ready(panels);

body {
  /* DEMO illustration purposes only */
  margin: 0;
  background-color: white;
  border: .5em dotted darkorange;
  height: 100vh;
  /* DEMO illustration purposes only */
}
* {
  box-sizing: border-box;
}
/*

    Panels Container

*/

.panels-container {
  display: flex;
  //width: 460px;
  //height: 290px;

  /* DEMO illustration purposes only */
  height: 100%;
  transform: scale(.9);
  /* DEMO illustration purposes only */
}
/*

    Panel Sections

*/

.panel__section {
  display: flex;
  flex-flow: row wrap;
}
.panel__section--media {
  flex-basis: 66%;
}
.panel__section--download {
  flex-basis: 34%;
}
/*

    Panel

*/

.panel {
  position: relative;
  transition: transform 300ms, opacity 500ms;
  cursor: pointer;
}
.panel--blue {
  flex-basis: 100%;
  height: 50%;
  background-color: #2196F3;
  background-image: url('https://cdn2.scratch.mit.edu/get_image/user/15016755_60x60.png?v=1465352804.66');
  background-size: 50% 100%;
  transform-origin: top left;
}
.panel--red,
.panel--yellow {
  flex-basis: 50%;
  height: 50%;
  align-self: flex-end;
}
.panel--red {
  background: url('http://iconshow.me/media/images/Application/Modern-Flat-style-Icons/png/512/Video.png') #F44336 no-repeat center;
  background-size: 120px;
  transform-origin: bottom left;
}
.panel--yellow {
  background: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/10731543_602219616549530_1911663388_n.jpg?ig_cache_key=ODQxODcxMTQxNDcxOTE1NzQw.2') #FFEB3B no-repeat center;
  background-size: 100%;
  transform-origin: center bottom;
}
.panel--green {
  flex-basis: 100%;
  height: 100%;
  background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698860-icon-129-cloud-download-128.png') #4CAF50 no-repeat center;
  transform-origin: center right;
}
/*

    Handle each panel when opened

*/

.panel--blue.opened {
  transform: scale(calc(1/.66), 2);
}
.panel--green.opened {
  transform: scaleX(calc(1/.34));
  background-size: 50% 50%;
}
.panel--red.opened {
  transform: scale(calc(1/.33), 2);
}
.panel--yellow.opened {
  transform: scale(calc(1/.33), 2);
}
/*

     Styling Helpers
    
*/

.faded {
  opacity: 0;
}
.opened {
  outline: 0;
}
.last-clicked {
  z-index: 1;
}
.panel-hover-effect:hover {
  transform: skewY(3deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Panel Section Begin -->
<section class="panels-container">
  <section class="panel__section panel__section--media">
    <div class="panel panel--blue panel-hover-effect"></div>
    <div class="panel panel--red panel-hover-effect"></div>
    <div class="panel panel--yellow panel-hover-effect"></div>
  </section>
  <section class="panel__section panel__section--download">
    <div class="panel panel--green panel-hover-effect"></div>
  </section>
</section>
<!-- Panel Section End -->

您可以阅读有关flexbox here 的更多信息。