4.8CSS弹性盒

Quebec.

已于 2023-04-13 19:02:48 修改

阅读量128

点赞数 1

文章标签： css html css3

于 2023-04-08 15:50:40 首次发布

本文链接：https://blog.csdn.net/qq_57985616/article/details/130024417

版权

一.怪异盒模型

css3属性: box-sizing: border-box; //不会改变设置的宽高.

//标准盒模型 box-sizing: content-box;

            height: 300px;

            background: palegreen;

            padding-left: 37px;

            padding-right: 12px;

            padding-top: 12px;

            padding-bottom: 7px;

            border: 3px solid #000;

            /* 怪异盒模型 */

            box-sizing: border-box;

二.弹性盒

弹性盒由弹性容器(Flex container)和弹性子元素(Flex item)组成.

1.弹性容器 :设置display:flex (类似块元素) 或inline-flex(类似行内块)

//弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行.

 <style>
        .box{
            width: 500px;
            height: 500px;
            background: salmon;
            display: flex;
        }
        section{
            width: 100px;
            height: 100px;
            background: palegreen;
            box-sizing: border-box;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
   <div class="box">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <!-- <section></section> -->

   </div>
</body>

2.修改排列方式 flex-direction

              /* 默认值横向 */
            flex-direction: row;
            /* 横向逆向  像是右浮 */
            flex-direction: row-reverse; 
            /* 竖向 */
            flex-direction: column;
            /* 竖向逆向 */
            flex-direction: column-reverse;

3.jusity-content

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

center

4.align-items

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

align-items: flex-start | flex-end | center | baseline | stretch

5.flex-wrap

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

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse -反转 wrap 排列。

display:flex;

flex-wrap:wrap;

6.拓展 flex-flow: 主轴方向,是否折行

7.align-content属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

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

/* 7.多行项目测轴对齐方式 */

/* 两端顶格对齐 */

align-content: space-between;

/* 两端环绕对齐 */

align-content: space-around;

/* 两端等距对齐 */

align-content: space-evenly;

}

8.align-self

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

align-self: auto | flex-start | flex-end | center | baseline | stretch

9.flex

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

Quebec.

关注

1
点赞
踩
0

收藏

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

/标准盒模型 box-sizing: content-box;弹性盒由弹性容器(Flex container)和弹性子元素(Flex item)组成.//弹性子元素通常在弹性盒子内一行显示。属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。/* 两端顶格对齐 *//* 两端环绕对齐 *//* 两端等距对齐 *//* 7.多行项目测轴对齐方式 */属性用于指定弹性盒子的子元素换行方式。
复制链接

扫一扫