flex:1
1.flex-grow:1,
现在有一个上下盒子,上面是固定值,下面是随页面高度变换的,
上面是120px高,给下面的外盒子高度设置为calc(100% - 120px);
如何让下面盒子的子盒子高度适应外部的高度呢?
答:给外部盒子添加display:flex,内部盒子设置为flex-grow:1。
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题,由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行,需要设置flex-shrink:0,默认不缩小就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
border: 1px solid black;
/* 较窄的容器,不足以容纳两个子元素 */
overflow: hidden;
/* 隐藏超出容器的内容 */
}
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
}
.no-shrink {
flex-shrink: 0;
/* 不缩小 */
}
.shrink {
flex-shrink: 1;
/* 默认值,可以缩小 */
}
</style>
</head>
<body>
<div class="container">
<div class="item no-shrink">No Shrink (Short)</div>
<div class="item shrink">Shrink (Long Text to Demonstrate Shrink)</div>
</div>
</body>
</html>
3.flex-basis:0% 表示元素应该尽可能地小,以便分配额外空间
flex-basis:100%表示他占比整个宽度的100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
border: 1px solid black;
overflow: hidden;
/* 隐藏超出容器的内容 */
}
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
/* box-sizing: border-box; */
/* 包含内边距和边框在总宽度中 */
}
.half-width {
flex-basis: 100%;
/* 占用容器宽度的一半 */
}
.fixed-width {
flex-basis: 20px;
/* 固定宽度 */
}
</style>
</head>
<body>
<div class="container">
<div class="item half-width">Half Width Item (50%)</div>
<div class="item fixed-width">Fixed Width Item (200px)</div>
</div>
</body>
</html>
4.flex: 1;
是一个非常常用的简写属性,用于在 Flexbox 布局中使子元素自动填充容器的可用空间,
每个 .nav-item
都设置为 flex: 1;
,这意味着它们将自动填充 .navbar
中的剩余空间,并且在容器宽度变化时等分空间。
flex-grow: 1;
- 定义了元素如何分配额外的空间。如果所有子元素都有相同的正数flex-grow
值,它们将会平均分配剩余空间。flex-shrink: 1;
- 定义了元素如何减少其大小以避免溢出。在这个上下文中,1 是一个默认值,表示元素可以缩小。(但是会造成高度的变化,属于flex的默认属性)flex-basis: 0%;
- 定义了元素在分配额外空间前的初始大小。0% 表示元素应该尽可能地小,以便分配额外空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.navbar {
display: flex;
/* 分布子元素 */
padding: 10px;
background-color: #f0f0f0;
border: 1px solid black;
}
.nav-item {
flex: 1;
/* 自动填充剩余空间 */
background-color: #ddd;
padding: 10px 20px;
margin: 5px;
border: none;
cursor: pointer;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="navbar">
<button class="nav-item">Home</button>
<button class="nav-item">About</button>
<button class="nav-item">Contact</button>
</div>
</body>
</html>
原文地址:https://blog.csdn.net/m0_47999208/article/details/140680355
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!