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

会玩代码的猫

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

阅读量1.2k

点赞数

文章标签： 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>