下载鸥 > 网站下载 > 开发教程 > JS/JQuery

CSS3弹性盒子常用属性介绍

122 2023-05-30 08:32:02

收藏
弹性盒子是css3里面的新布局,其效果与float类似,但应用范围、视觉效果、对齐效果远超float属性。通过使用弹性盒子flex,我们可以实现页面元素自动布局 、自动分布与排列。

前面系统的发过了弹性盒子的介绍,包括图文版与纯文字版,今天主要介绍几个常用的flex布局方式。
 

简约版单行弹性盒子布局

.flex{
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	flex-wrap: nowrap;
	justify-content: space-between;
}
 

垂直居中对齐

.center{
	height:100%;
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap:wrap;/* 加入本属性会强制换行*/
}
 

设置每行个数

.flex{
	display:grid; 
	grid-template-columns: repeat(3, 1fr);/* 此处的3就是个数,每行3个*/
}



如果只是简单的html,使用float即可。如果页面效果比较高级,而客户验收又是像素级要求,那么弹性盒子才是不二选择。

本文地址:https://xzo.com.cn/develop/js/1155.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 304
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 315
怎样点击清除ul里的全部li信息?
怎样点击清除ul里的全部li信息?

在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...

1 382
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 273
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 361
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 464
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1517
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1308
随机JS/JQuery开发教程
CSS3之弹性盒子布局flex(文字版)
CSS3之弹性盒子布局flex(文字版)

CSS3 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素...

0 92
弹性盒子布局全解(多图)
弹性盒子布局全解(多图)

弹性盒子,通常被称为 flexbox,是一种一维的布局模型。它给弹性元素提供了强大...

0 100
html5标签picture:自动加载不同尺寸的图片
html5标签picture:自动加载不同尺寸的图片

响应式页面的情况下,pc和手机端加载图片不同时,比较常规的做法是加载2张,同时...

0 92
vue引入css文件的方法
vue引入css文件的方法

vue中要如何规范的引入css文件呢?在项目的src文件下,新建一个style文件夹,存放...

0 80
sublime手动安装vue高亮插件
sublime手动安装vue高亮插件

sublime的vue高亮插件可直接在程序里安装,如果安装不上反复报错,也可以使用手...

0 86
Vue在npm  run serve时报错Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be pr
Vue在npm run serve时报错Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be pr

Vue在npm  run serve时报错Error: @vitejs/plugin-vue requires vue (>=3....

0 813
Vue怎样循环?
Vue怎样循环?

如果是普通字符串,vue的v-for可以直接循环,如果里面有图片,链接之类的,需要做简...

0 88
判断是否safari浏览器的代码
判断是否safari浏览器的代码

一段判断是否为safari浏览器的代码。...

0 71
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入