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>
相关推荐
景天科技苑7 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星12518 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12525 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00134 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿41 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架