CSS的弹性盒子模型(Flex box)

弹性盒子模型是CSS3的一种新的布局模式,弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式,引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列,对齐和分配空白空间。

弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item)组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器,弹性容器包含了一个或多个弹性子元素。

注意:弹性容器外及弹性子元素内是正常渲染的,弹性盒子只是定义了弹性子元素如何在弹性容器内布局。

display属性

开启弹性盒子

html 复制代码
   display: flex;
未开启弹性盒子如下
html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
         
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
开启弹性盒子

flex-direction属性

指定弹性子元素在父容器中的位置

row: 横向从左到右排列(左对齐),这是默认排列方式。

row-reverse:反转横向排列(右对齐,从后往前排列,最后一项排在最前面)

column:纵向排列

colimn-reverse:反转纵向排列

html 复制代码
   flex-direction: row-reverse;
css 复制代码
 flex-direction:column;
css 复制代码
 flex-direction:column-reverse;

justify-content属性

内容对齐属性,应用在弹性容器上,把弹性项沿着弹性容器的株洲县对齐。

flex-start: 弹性项向行头紧挨着,这个是默认值。

flex-end:弹性项向行尾紧挨着填充。

center: 弹性项居中紧挨着。(如果剩余的自由空间是负的,则弹性项将在两个方向上同时溢出)

css 复制代码
     justify-content: flex-end;
css 复制代码
justify-content: center;

align-items属性

设置或检索弹性盒子子元素在侧轴(纵轴)上的对齐方式。

flex-start:弹性盒子子元素的侧轴(纵轴)起始位置的边界靠住的纵轴其实边界。

flex-end: 弹性盒子子元素的侧轴(纵轴)起始位置的边界靠住的该行纵轴其实边界。

center:弹性盒子元素在该行的侧轴(纵轴)上居中的位置。(如果该行的尺寸小于弹性盒子的尺寸,则会向两个方向溢出相同的长度)。

css 复制代码
     align-items: flex-start;
css 复制代码
 align-items: flex-end;
css 复制代码
 align-items: center;

flex-grow 或flex属性(用于子元素)

根据弹性盒子元素所设置的扩展因子做为比率来分配剩余空间,默认为0。即如果存在剩余空间也不会放大。如果只有一个子元素设置,那么按扩展因子转化的百分比对其分配剩余空间,0.1即为10%,1为100%,超出按100%计算。

html 复制代码
    <style>
        .continer{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            display: flex;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 0.3;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            flex: 0.3;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex: 0.4;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui