可适应移动，PC端灵巧的弹性盒子——Flex

一、felx属性

1.display:flex; 就是将元素设置为弹性容器。若子元素过多时，会有缩放，相当于浮动，但是区别于浮动的一点是其宽高仍然存在。
display:inline-flex; 类似于行内元素。设置flex之后，子元素的float clear vertical 都会失效

2.设置主轴方向
flex-direction:row; 默认，横向一行排列
row-reverse; 反转，横向一行排列
flex-direction:column; 纵向一行排列
column-reverse 反转纵向一行排列
要和主轴的反转区别：比如反转是主轴跑到了右边，从右到左为box1 box2 box3。这个是从左到右box1 box2 box3 /

主轴方向上的对齐方式
justify-content:flex-start; 子元素位于弹性盒的开头
flex-end; 子元素位于弹性盒的结尾，
center; 子元素位于弹性盒中间
justify-content: space-around; 子元素之前之后中间都有空白空间
justify-content: space-between; 子元素之前之后都没有空白空间，只有子元素中间有空白空间

				侧轴方向上的对齐方式：

align-items: stretch; / stretch的英文翻译是拉长、撑大、有弹性默认值如果子元素没有高度或者高度为自动(auto)时，将占满整个容器的高。 //
align-items: flex-start; / 子元素在交叉轴的起点对齐 /
align-items: flex-end; / 子元素在交叉轴的终点对齐 /
align-items: center; /子元素在交叉轴的中点对齐 /
align-items: baseline; / 子元素在第一行文字的基线对齐 /
交叉轴方向上的留白空间：没有

设置弹性子元素在一根轴线上排不下时的换行方式。
flex-wrap: nowrap; / 默认值，不换行 /
flex-wrap: wrap; / 换行，换行之后宽度都变的一致，即为自己设置的宽度，它不再会对自己做压缩/
flex-wrap: wrap-reverse; / 换行，换行之后宽度一致，即为自己设置的宽度，它不再会对自己做压缩，而且第一行显示在下方 /

设置多根轴线的对齐方式：
align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效。
flex-wrap: wrap ;/这是换行操作，换行之后宽度都变的一致，即为自己设置的宽度，它不再会对自己的宽高做压缩/
align-content: stretch; /默认值，轴线占满整个交叉轴.这个属性曾在交叉轴垂直对齐方式出现过/
align-content: flex-start; / 与交叉轴的起点对齐 /
align-content: flex-end; / 与交叉轴的终点对齐 /
align-content: center; / 与交叉轴的中点对齐 /
align-content: space-around; / 在交叉轴的之上、中间、之下都有空间
align-content: space-between; /* 只在交叉轴的轴线中间有留白 /

下面这些都是添加在子元素上的属性

order属性：调整子元素的排列次序
order:数值；数值不加单位，默认值为0，数值越大，排列越靠后
flow-grow属性：调整子元素的放大比例。
flex-grow: 0; / 0表示正常状态，不放大 /
/ 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。
1表示把剩下的剩余空间分成三份，一个子元素都占其中的一份 /
flex-grow: 2; / nth-child(2)相当于是挑出子元素中的第二个盒子进行设置，设置为2之后，发现wrap2相当于分成了四份，box2自己占了两份。 /
flex-shrink: 0; / 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
flex-shrink: 1; / 设置为1之后就可以缩放了 /
align-self属性：调整弹性容器中被选中的子元素的对齐方式
align-self: auto; / 默认值，继承了父容器的align-items属性，如果没有父元素，值为stretch /
align-self: stretch; / 占满整个容器的高度 /
align-self: flex-start; / 交叉轴的起点对齐 /
align-self: flex-end; / 交叉轴的终点对齐 /
align-self: center;
align-self: baseline ;/ 子元素的第一行文字的基线对齐 */

二、使用步骤

1.详细讲解

可以自行感受flex的妙用，所有的代码如下

2.具体代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father{
            display: flex;


            flex-direction:row;
            flex-direction:row-reverse;
            flex-direction:column;
            flex-direction:column-reverse;

            justify-content:flex-start;
            justify-content:flex-end;
            justify-content:center;
            justify-content:space-around;
            justify-content:space-between;

            align-items: stretch;
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;

            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;

            flex-wrap: wrap	;
            align-content: stretch;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
            align-content: space-between;


            flex-grow: 0;
            flex-grow: 0;
            flex-grow: 2;
            flex-shrink: 0;
            flex-shrink: 1;

            align-self: auto;
            align-self: stretch;
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;

            align-self: baseline;
            align-items: baseline;
            width: 500px;
            height: 500px;
            border: 1px solid black;


        }
        .son{
            width: 100px;
            height: 100px;
            background: yellow;
            border: 1px solid black;
            margin: 1px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
<!--        <div class="son">4</div>-->
<!--        <div class="son">5</div>-->
<!--        <div class="son">6</div>-->
<!--        <div class="son">7</div>-->
<!--        <div class="son">8</div>-->
    </div>
</body>
</html>

总结：

灵活运用flex弹性盒子对页面开发大有益处

posted @ 2022-08-31 17:04 有诗亦有远方阅读(54) 评论(0) 收藏举报来源

刷新页面返回顶部

有诗亦有远方

可适应移动，PC端灵巧的弹性盒子——Flex