flex 弹性盒

fanxingxue

已于 2023-04-04 14:34:06 修改

阅读量78

点赞数

文章标签：前端 javascript 开发语言

于 2022-07-31 14:31:17 首次发布

原文链接：https://blog.csdn.net/qq_34629352/article/details/114454278

版权

1、父元素添加的属性

1.display:flex/inline-flex;
flex将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块弹性伸缩盒显示
2.flex-direction (主轴排列方向)
row 默认，横向一行排列
row-reverse 反转横向排列
column 纵向排列
column-reverse 反转纵向排列
3.justify-content(主轴对齐方式)
flex-start 默认，顶端对齐
space-evenly 等距离分配
space-around 中间距离为两端二倍
space-between 两端对齐，中间自动分配
center 居中对齐
flex-end 末端对齐
默认元素在主轴上容不下不会换行，会被压缩
4.align-items(侧轴对齐方式)
flex-start 侧轴起始边界
flex-end 侧轴结束边界
center 居中放置
baseline 基线对齐
stretch 默认值，项目被拉伸以适应容器，前提是子元素没有在侧轴方向上设置尺寸
5.flex-wrap设置换行
nowrap 容器为单行，该情况下子项可能会溢出容器
wrap 容器为多行，子项内部会发生断行
wrap-reverse 反转排列(正常情况下，三个分两行排列为上2下1，使用这个可以变成上1下2，如微信头像，三个图标排列样式)
6.align-content(行与行之间对齐方式)
flex-start 顶部对齐没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐，中间自动分配
space-around 中间距离为两端二倍
space-evenly 等距离分配
stretch 默认值，项目被拉伸以适应容器

2、子元素添加的属性

1.align-self 灵活容器内被选中项目的对齐方式
可重写灵活容器的align-items属性
auto 默认值，元素继承了它的父容器的align-items属性
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的顶部
flex-end 元素位于容器的底部
2.order 排序优先级
数字越大越往后排，默认为0，支持负数
3.flex-grow 项目的放大比例
flex-grow:1;
同flex:1;--放大比例
4.flex-shrink 项目的缩小比例
flex-shrink:0;元素不缩小
5.flex-basis 项目的长度
6.flex为345的简写形式
默认值flex:0 1 auto;

以下内容参考链接：flex：auto含义_baoleilei6的博客-CSDN博客_flex:auto

当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

.item {flex: none;} 等同于.item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }

当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的

.item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

.item-1 {flex: 0%;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .item-2 {flex: 24px;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px; }

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;} .item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%; }

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;} .item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px; }

应用

1、上中下布局，中间部分的第二列自适应

<!-- 中间两侧不动，中间自适应 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../common.css">
    <style>
        header, .content, footer{
            width: 50vw;
            height: 10vh;
            border: 1px solid red;
            margin: 0 auto;
        }
        .content{
            height: 50vh;
            display: flex;

        }
        .content1, .content3{
            flex: 1;
            border: 1px solid red;
            /* 取消两侧缩小，放大的比例 */
            flex-shrink:0;
            flex-grow: 0;
        }
        .content2{
            flex: 2;
            align-self:flex-start;
        }
    </style>
</head>
<body>
    <header>header</header>
    <div class="content">
        <div class="content1">content1</div>
        <div class="content2">content2</div>
        <div class="content3">content3</div>
    </div>
    <footer>footer</footer>
    
</body>
</html>