html - 在 flexbox 中调整 div

Question

我正在尝试根据页面和列的大小调整 div 的大小。 div 必须始终是正方形，无论其宽度如何。我的意思是:

当它被设置成一行时，它会占用分配给它的空间量。在这种情况下，文本占据了 50% 的空间。剩余的 50% 必须由方形 div 占用。

当它设置为一列(在较小的屏幕上堆叠)时，它会占用分配给它的空间量。在这种情况下，正方形 div 是屏幕的整个宽度。

div.layout-1-img{
    flex: 1;
    background-color: gray;
    width: 5em;
    height:5em;
}

Jsfiddle

Answer 1

据我了解:你有一个包含你想要的文本的 div，但是这个 div 的宽度和高度会改变。无论页面宽度如何，您都希望 outerdiv 始终是 SQUARE，但内部仍然有文本 div。

可能的解决方案:

创建一个外部div:

.outerDiv{
display: block;
position: absolute;
background-color: gray;
padding: 10px;   // Specify the padding value if you want
}

然后使用jquery:

    $(document).ready(function(){

       //Get the text div height and width
    var height = $('#textdiv').height();
    var width = $('#textdiv').width();

// increase the size of height or width by 
// How much taller you want the back to be compared to text div.
//In this example I'm increasing the background by a factor of 2

height = height *2;
width = width *2;

    //Compare to see which one is largest.
// Then change css of background to correspond to the correct size

if(height>width){
$('.outerDiv').height(height);
$('.outerDiv').width(height);
}else{
$('.outerDiv').height(width);
$('.outerDiv').width(width);
}

    });