CSS弹性盒子

最新推荐文章于 2024-07-17 18:42:40 发布

坑爹坑钱坑你妹°

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量251

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_53612668/article/details/120691812

版权

1、flex-direction 属性指定了弹性子元素在父容器中的位置。语法：flex-direction: row(默认)、row-reverse 、 column 、column-reverse

2、内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：justify-content: flex-start(默认) 、flex-end 、 center 、 space-between 、 space-around

3、align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：align-items: flex-start(默认) 、flex-end 、 center 、 baseline 、 stretch

4、 align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐，使用前必须声明flex-wrap: wrap;

语法：align-content: flex-start 、 flex-end、 center、 space-between 、 space-around、 stretch(默认)

5、 flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法：flex-wrap: nowrap(默认)、wrap、wrap-reverse、initial|inherit

6、 align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法：align-self: auto、flex-start 、 flex-end 、 center 、 baseline 、 stretch

7、flex 属性用于指定弹性子元素如何分配空间。

语法：flex: auto 、 initial 、 none 、 inherit 、 [ flex-grow ] 、 [ flex-shrink ] 、 [ flex-basis ]

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            :root{
                margin: 200px 200px;
            }
            #contain{
                display: flex;
                width: 600px;
                height: 400px;
                background: gray;
                /* 设置div对于y轴的位置 */
                justify-content: center;
                /* 声明div宽度超过我们的弹性盒子宽度时是否换行 */
                flex-wrap: wrap;
                /* 设置div对于x轴的位置 --> align-items: flex-end; */

                align-content: space-around;
                /* 使用前必须声明flex-wrap: wrap; */
            }
            .one{
                width: 100px;
                height: 150px;
                background: burlywood;
                margin: 10px;
            }
            .my{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: burlywood;
                /* 相当于对本行中心线对齐方式 */
                align-self: flex-end;
                /* 设置执行的顺序，数字越小，执行的越早，可以为负数 */
                order: 2;
            }
            .th{
                flex: 2;
                order: 6;
            }
        </style>
    </head>
    <body>
        <div id="contain">
        <div class="one">我是第一个div</div>
        <div class="one">我是第二个div</div>
        <div class="one">我是第三个div</div>
        <div class="one">我是第一个div</div>
        <div class="one">我是第二个div</div>
        <div class="one th">我是第3个div</div>
        <div class="one">我是第一个div</div>
        <div class="one">我是第二个div</div>
        <div class="my">我是第4个div</div>
        </div>
    </body>
</html>

坑爹坑钱坑你妹°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS弹性盒子

1、flex-direction 属性指定了弹性子元素在父容器中的位置。语法：flex-direction: row(默认)、row-reverse 、 column 、column-reverse 2、内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content 语法如下：justify-content: flex-start(默认) 、flex-end 、 center 、 spa...
复制链接

扫一扫