flex布局

路和远方

已于 2022-09-22 10:37:17 修改

阅读量399

点赞数 1

分类专栏： Web 文章标签：前端

于 2022-09-21 12:24:29 首次发布

本文链接：https://blog.csdn.net/shuzhuchengfu/article/details/126970243

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex布局

开启flex功能

<html>
    <head>
        <style>
            .container{
                border: 1px solid #000;
                width: 400px;
                height: 400px;
                margin-left: 20px;
                margin-top: 20px;
                display: flex; // 开启flex布局
            }
            .item{
                width: 100px;
                height: 100px;
                color: #fff;
                text-align: center;
                line-height: 100px;
                font-size: 50px;
            }
            .item:nth-of-type(1){
                background-color: #f00;
            }
            .item:nth-of-type(2){
                background-color: #0f0;
            }
            .item:nth-of-type(3){
                background-color: #00f;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

开启前

开启后

属性介绍

flex-direction

flex items 默认都是沿着main axis(主轴)从main start 到main end 方向排布
flex-direction决定了main axis的方向，有4个取值
row(默认值),row-reverse,column,column-reverse
flex-direction_value

justify-content

justify-content决定了flex item在主轴上的对齐方式
flex_justify-content

flex-start(默认值)：与main start 对齐
flex-end：与main end 对齐
center：居中对齐
space-between：
flex items 之间的距离相等
与main start和main end两端对齐
space-evenly：
flex items 之间的距离相等
与main start和main end之间的距离等于flex items 之间的距离
space-around：
flex items 之间的距离相等
与main start和main end之间的距离等于flex items 之间的距离的一半

align-items

align-items决定了flex items在cross axis上的对齐方式
flex_align-items

stretch(默认值)：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start：与cross start 对齐
flex-end：与cross end 对齐
center：在cross axis 方向上居中对齐
baseline：与基准线对齐

flex-wrap

flex-wrap 决定了 flex container 是单行还是多行

nowrap(默认)：单行
wrap：多行（如果size不够，子item size会被压缩）
wrap-reverse：多行（对比wrap,cross start与cross end相反）

flex-flow

flex-flow是flex-direction || flex-wrap的缩写
比如：

flex-flow:column wrap  等价于
- flex-direction:column
- flex-wrap:wrap
flex-flow:row-reverse  等价于
- flex-direction:row-reverse
- flex-wrap:nowrap
flex-flow:wrap  等价于
- flex-direction:row
- flex-wrap:wrap

align-content

align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
flex_align-content

stretch(默认值)：与align-items的stretch类似
flex-start：与cross start 对齐
flex-end：与cross end 对齐
其他属性同justify-content

order

order决定了flex items的排布顺序

可以设置任意整数（正整数，负整数，0），值越小就越排在前面
默认值是0

align-self

flex items 可以通过 align-self 覆盖 flex container设置的align-items
auto（默认值）：遵从flex container的align-items设置
其他属性值及效果和align-items一致

flex-grow

flex-grow决定了flex items如何扩展

可以设置任意非负数（正整数，正小数，0）默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有的flex items的flex-grow总和sum超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow / sum

<style>
	.container{
            ...
            width: 400px;
            display: flex;
        }
        .item{
			...
            flex-grow: 1;
        }
        /*
            间隙大小 400 - 100 * 3 = 100
            当 flex-grow 之和大于1
            每个item扩展的宽度 100 * 1/3 = 33.3
        */
</style>

大于1-flex-grow

如果所有的flex items的flex-grow总和sum不超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow

<style>
	.container{
            ...
            width: 400px;
            display: flex;
        }
        .item{
			...
            flex-grow: 0.1;
        }
        /*
            间隙大小 400 - 100 * 3 = 100
            当 flex-grow 之和小于1
            每个item扩展的宽度 100 * (0.1 * 3) * 1/3 = 10
            最终还剩余70的间隙
        */
</style>

小于1-flex-grow

flex-shrink

flex-grow决定了flex items如何收缩

可以设置任意非负数（正整数，正小数，0）默认值是1
当flex items在main axis方向上超过flex container的size,flex-shrink属性才会有效
每个flex item 收缩的size为 flex items 超出 flex container的size * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex-shrink * flex item的base size(base size是flex item 放入 flex container之前的size)
flex items 收缩后的最终size不能小于min-width\min-height
flex-shrink之和大于1

<style>
	.container{
            ...
            width: 400px;
            display: flex;
        }
        .item{
			...
			width: 200px;
            flex-shrink: 1;
        }
        /*
            超出 200 * 3 - 400 = 200
            当 flex-shrink 之和大于1
            每个item缩小的宽度 
            200 * (1 * 100)/(1 * 100 * 3) = 66.6
        */
</style>

flex_flex_shrink_up_1

flex-shrink之和小于1

<style>
	.container{
            ...
            width: 400px;
            display: flex;
        }
        .item{
			...
			width: 200px;
            flex-shrink: 0.1;
        }
        /*
            超出 200 * 3 - 400 = 200
            当 flex-shrink 之和小于1
            每个item缩小的宽度 
            200 * (0.1 * 3) * (0.1 * 100)/(0.1 * 100 * 3) = 20
            超出的距离 200 - 20 * 3 = 140
        */
</style>

flex_flex_shrink_below_1