flex 新老版本的对比

最新推荐文章于 2023-08-16 09:16:09 发布

哆来A梦没有口袋

最新推荐文章于 2023-08-16 09:16:09 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： flex布局新老flex对比

本文链接：https://blog.csdn.net/qq_42625428/article/details/83755402

版权

web前端专栏收录该内容

68 篇文章 4 订阅

订阅专栏

1.什么是flex？

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

1). 一些基本概念：

1.设置了display:flex的元素称为容器，里面的第一层子元素称为项目

2. 主轴：默认水平方向，从左向右，交叉轴: 默认是垂直方向，从上往下

主轴起点-主轴与左边框的交叉点交叉轴起点：交叉轴轴与上边框的交叉点

主轴终点-主轴与左边框的交叉点交叉轴终点：交叉轴轴与下边框的交叉点

主轴空间：项目占据主轴的空间，项目的宽交叉轴空间：项目占据交叉轴的空间，项目的高

如图所示：

flex是不同于block ，inline-block的新的布局

2).属性：

(1) 容器属性：

01.flex-direction: 设置主轴方向

值： row | row-reverse | column | column-reverse

默认值从左往右 | 从右往左 | 从上到下 | 从下到上

02 flex-wrap : 设置是否自动换行

值： no-wrap | wrap | wrap-reverse

不自动换行(会自动压缩宽高) | 自动换行(平分容器) | 自动换行且翻转

03 flex-flow 复合属性设置主轴方向和是否换行

如：column wrap;

04 justify-content 主轴的对齐方式

值：flex-start | flex-end | center | space-around | space-between

主轴开始方向对齐 | 主轴结束方向对齐 | 中心对齐 | 间隔等分-左右间隔 | 两端对齐，间隔等分

05 align-items 在交叉轴上的

值：flex-start | flex-end | center | baseline | stretch

交叉轴的开始 | 交叉轴的结束 | 居中 | 按文字的基准线对齐 | 拉伸(当元素的高度为auto或没设置起作用)

06 align-content 交叉轴设置多根轴线(有换行的)的对齐方式

(2) 项目属性：

1.order 排序，数值越小越靠前，默认值为0
2.flex-grow 按比例分配剩余空间 - 属性定义项目的放大比例，默认为0(剩余空间不放大也不缩小)
数值是一个比例值

3.flex-shrink 默认为1.定义项目的缩小比例，即空间不足，该项目缩小,0代表不缩小
谁设置缩小，从谁身上拿取，超出部分来进行计算
4.flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间
这个一般是和放大缩小一起用
让一个位置固定 flex-basis：200px;
flex-shrink:0;
flex-grow: 0;
flex: 0 0 200px(沿着主轴方向)

5.flex 复合属性 flex-grow flex-shrink || flex-basis
特殊值 auto === 1 1 auto
none === 0 0 auto

6.align-self 允许单个项目与其他项目不一样的对齐方式
auto | flex-start | flex-end | center | baseline | stretch

默认继承，如果没有继承，默认拉伸

2.flex 布局-新老版本对比

注意点：项目永远在x轴的正方向

分类：老版本的 -webkit-box

新版本的 flex

老版本的 display:-webkit-box;

容器上的属性 -webkit-box-orident 属性值:horizontal 控制主轴为x轴

vertical 控制主轴为Y轴

-webkit-box-direction 属性值：normal 正常方向 x的右边 y的下边

reverse 相反的方向

富裕空间的管理主轴 -webkit-box-pack 属性值: start x轴的右边 y轴的下边

end x轴的左边 y轴的上边

center 富裕空间在两边

justify 富裕空间在项目之间

侧轴 -webkyit-box-align 属性值: start y轴的下边 x轴的右边

end y轴的上边 x轴的左边

center 富裕空间在两边

项目上的管理：弹性空间的管理 -webkit-box-flex 属性值为number

新版本flex display:flex;

容器上的管理 flex-direction 属性值： row x轴的右边为主轴

column y轴的下边为主轴

row-reverse x轴的左边为主轴

column-reverse y轴的上边为主轴

富裕空间的管理主轴 justify-content flex-start 主轴的正方向

flex-end 主轴的反方向

center

space-between

space-around

侧轴 justify-content flex-start 侧轴的正方向

flex-end 侧轴的反方向

center

baseline 根据基线

strech 拉伸，用于等高布局

弹性空间的管理 flex-grow 默认值为0

3.常用的flex布局

左中右布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body,.box {
            height: 100%;
        }

        .box {
            display: flex;
        }
        .box_left {
            flex: 0 0 300px;
            background: salmon;
        } 
        .box_center{
            flex: 1;
            background: coral;
        }
        .box_right {
            flex:0 0 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_left">左</div>
        <div class="box_center">中</div>
        <div class="box_right">右</div>
    </div>
</body>
</html>

左上中下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body,.box {
            height: 100%;
        }

        .box {
            display: flex;
        }
        .box_left {
            flex: 0 0 300px;
            background: salmon;
        } 
        .box_right {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .right_top {
            flex: 0 0 50px;
            background: powderblue;
        }
        .right_center {
            flex: 1;
            background: darkgoldenrod;
        }
        .right_bottom {
            flex: 0 0 50px;
            background: darkmagenta;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_left">左</div>
        <div class="box_right">
            <div class="right_top">上</div>
            <div class="right_center">中</div>
            <div class="right_bottom">下</div>
        </div>
    </div>
</body>
</html>

哆来A梦没有口袋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex 新老版本的对比

1.什么是flex？ CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 1). 一些基本概念： 1.设...
复制链接

扫一扫