flex布局之作用在子元素上的属性

会玩代码的猫

已于 2023-03-30 08:52:10 修改

阅读量1k

点赞数

文章标签： html css 前端

于 2023-03-29 13:42:09 首次发布

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129831688

版权

flex-grow

flex-shrink

flex-basis

1.flex-grow 扩展比例

默认值是，表示不占用剩余的空白间隙扩展自己的宽度

扩展来分配左边的空隙

1.1只有一个子元素时候，0-1表示所占空隙比例，1是沾满，大于1的数和1相同都是占满

子元素宽度 = 子元素宽度+（父元素宽度-子元素宽度）*（小数）

<style>
.main{
    width: 500px;
    height: 300px;
    background: skyblue;
    display: flex;
}
.main div{
    width: 100px;
    height: 100px;
    background: red;

    /* 默认的 不占满剩余的所有空间 */
    /* flex-grow: 0; */

    /* 如果比列值是 1 ， 就沾满剩余的所有空间 */
    /* flex-grow: 1; */
    /* 
    剩余宽度：500 - 100 = 400 
    400 * 0.5 -> 200 + 100 -> 300 */
    flex-grow: 0.5;

    /* 当前比列值大于等于 1  都会沾满整个空间 */
    /* flex-grow: 2; */
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>

1.2多个元素的时候，0-1之间的数，每个子元素分配与单个的情况不变，大于一的时候按占比来分配

<style>
.main2{
    width: 500px;
    height: 300px;
    background: skyblue;
    display: flex;
}

/* 
1、两个子元素如果 flex-grow值一样(整数) 会平均分配剩余空间
2、如果值不一样 剩余的宽度*flex-grow的参数就是所占用的值
也就是flex-grow的和 就是剩余空间所划分的份数，每个子元素占剩余空间的几分之几

3、如果是小数，会把剩余的空间分成10份  第一个占两份  第二个占一份
*/

.main2 div:nth-of-type(1){
    width: 200px;
    height: 100px;
    background-color: red;
    /* flex-grow: 0; */

    flex-grow: 0.2;
}
.main2 div:nth-of-type(2){
    width: 100px;
    height: 100px;
    background-color: blue;
    /* flex-grow: 0; */
    flex-grow: 0.1;
}
</style>
</head>
<body>
<!--  <div class="main">
<div>1</div>
</div> -->


<div class="main2">
<div>1</div>
<div>2</div>
</div>
</body>

2、flex-shrink -- 收缩比列

2.1一个元素

默认值自动收缩跟容器的大小相同
flex-shrink: 1;
如果是 0 那就不收缩
flex-shrink: 0;
超出父元素的宽度与这个系数做乘法运算

// 一个子元素
<style>
.main{
    width: 500px;
    height: 300px;
    background: skyblue;
    display: flex;
}

.main div{
    width: 600px;
    height: 100px;
    background-color: red;    

    /* 默认值 自动收缩 跟容器的大小相同 */
    /* flex-shrink: 1; */
    /* 如果是 0 那就不收缩 */
    /* flex-shrink: 0; */
    /* 超出父元素的宽度与这个系数做乘法运算  */
    flex-shrink: 0.5;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>

2.2 两个及以上元素

子元素宽度 = 子元素宽度-（超出元素宽度*比例）

1、默认值是 1 的情况下
300 + 400 - 500 -> 200

第一个子元素是300 第二个子元素是400 父元素是 500 超出了 200

当前空间：
300 - 3/7 * 200
400 - 4/7 * 200

当 flex-shrink 参数变成了 2 宽度是 300 这个时候宽度就变成了 2 * 300 = 600

300 - 6/10*200
400 - 4/10*200

// 两个子元素
<style>
.main2 {
    width: 500px;
    height: 200px;
    background: skyblue;
    display: flex;
}

.main2 div:nth-of-type(1) {
    width: 300px;
    height: 100px;
    background-color: red;
    flex-shrink: 2;
}

.main2 div:nth-of-type(2) {
    width: 400px;
    height: 100px;
    background-color: blue;
    flex-shrink: 1;
}

/* 
1、默认值是 1 的情况下
300 + 400 - 500 -> 200

第一个子元素是300 第二个子元素是400 父元素是 500 超出了 200 

当前空间：
300 - 3/7 * 200 
400 - 4/7 * 200 

当 flex-shrink 参数变成了 2  宽度是 300  这个时候 宽度就变成了 2 * 300 = 600 

300 - 6/10*200
400 - 4/10*200

*/
</style>
</head>

<body>
<!-- <div class="main">
<div>1</div>
</div> -->


<div class="main2">
<div>1</div>
<div>2</div>
</div>
</body>

3、flex-basis 以及flex 的缩写

默认值是 auto 制定了flex元素在主轴方向的初始大小

用途：如果没有 flex-direction: column 宽度改成200 水平就是200的宽度高度是100
如果有 flex-direction: column 高度是200 宽度是 100
如果添加了 flex-basis 就不需要修改宽度和高度值了

根据主轴的不同的宽度和高度的优先级不同

<style>
.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex; 
    flex-direction: column;
}

/* 
用途：如果没有 flex-direction: column 宽度改成200 水平就是200的宽度  高度是100  
如果有 flex-direction: column 高度是200  宽度是 100 
如果添加了 flex-basis 就不需要修改宽度和高度值了
*/

.main div {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 根据主轴的不同的 宽度和高度的优先级不同 */
    flex-basis: 200px;
}
</style>
</head>

<body>
<div class="main">
    <div>1</div>
</div>
</body>

3.1flex-basis的取值

flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

默认值是 auto

1.固定大小 200px

2.文字撑开 auto

3.最小宽度 0（文字会竖起来）

4.跟父元素同宽 100%

.main div {

    background-color: red;
    /* 0% auto  200px 100% */

    /* 固定大小 */
   /* flex-basis: 200px; */
    /* 文字撑开的宽度 */
   /* flex-basis: auto; */
    /* 最小宽度，文字得竖起来 */
   /* flex-basis: 0; */
    /* 跟父元素同宽 */
   flex-basis: 100%;
}

3.2flex缩写

1.flex:1

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

2.flex:0

flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;

3.flex:auto

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

4.flex: 1 0 50%;

/* 
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
*/
/* flex: 1; */

/* 
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
*/
/* flex: 0; */


/* 
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
*/
/* flex: auto; */


flex:  1 0  50%;

4.order

默认值是0 改变某一个flex子项的排序位置

正数优先级要高，负数优先级低

<style>
.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex;
}

.main div {
    width: 100px;
    height: 100px;
    background-color: red;
}

.main div:nth-of-type(1) {
    /* 默认值是 0 正数优先级要高 */
    order: 1;
}

.main div:nth-of-type(4) {
    /* 默认值是 0 负数优先级要低 */
    order: -1;
}
</style>
</head>

<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>

5.align-self -- 针对某个小的元素

会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值

5.1.align-self: stretch;

5.2 align-self: center;

5.3 align-self: start;

5.4 align-self: end;

<style>
.main {
    width: 500px;
    height: 500px;
    background-color: skyblue;
    display: flex;
    align-items: center;
}

.main div {
    width: 100px;
    height: 100px;
    background-color: red;
}
.main div:nth-of-type(4){
    height: 50px;
    /* 对应的是父元素中的align-items: center的属性值 */
    align-self: flex-end;
}
</style>
</head>

<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>

会玩代码的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局之作用在子元素上的属性

flex-growflex-shrinkflex-basis默认值是，表示不占用剩余的空白间隙扩展自己的宽度扩展来分配左边的空隙子元素宽度 = 子元素宽度+（父元素宽度-子元素宽度）*（小数） 1.2多个元素的时候，0-1之间的数，每个子元素分配与单个的情况不变，大于一的时候按占比来分配2、flex-shrink -- 收缩比列默认值自动收缩跟容器的大小相同flex-shrink: 1;如果是 0 那就不收缩flex-shrink: 0;超出父元素的宽度与这个系数做乘法运算
复制链接

扫一扫