怎样让弹性盒子元素高度不受父元素影响

发布网友发布时间：2023-02-24 21:53

共2个回答

热心网友时间：2024-01-18 16:04

让弹性盒子元素高度不受父元素影响
1. 因为子元素时按照主轴方向排列的,所以我们需要改变主轴方向来改变排列方式 flex-direction(主轴方向): row(默认值):主轴横向,从左向右 row-reverse:主轴
2. 因为子元素在弹性盒模型里默认不换行,需要设置 flex-wrap 来使它换行 flex-wrap: 1.wrap:换行,虽然换行但是会在评分父级高度处换行(flex
3. 在主轴的排列方向 justify-content 主轴起点为mian start,终点为mian end 在不动主轴的情况下justify-content: flex-end:右对齐 flex-start(默认值

热心网友时间：2024-01-18 16:05

怎么是弹性盒子
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
这些弹性盒子都可以实现。。。我草

指定元素的布局为弹性盒子
首先，我们需要给父元素设置display：flex

div {
display:flex
}

<style>
.parent {
width:500px;
height:200px;
background-color:coral;
display:flex; /*弹性盒子*/
}
.parent div {
width:100px;
height:100px;
background-color:blueviolet;
}
</style>

<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>