详解CSS3弹性伸缩盒


Posted in HTML / CSS onSeptember 21, 2020

用途

  • 弹性盒子对于前端web网页布局来说,有着举足轻重的作用,移动端也是如此。掌握了弹性盒子用法,对于目前编写自适应页面很重要。掌握这种布局规则,是一项必备技能。
     

弹性伸缩盒模型说明

详解CSS3弹性伸缩盒

  • 主轴(main axis) 是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end**。
  • 交叉轴(cross axis) 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end**。
  • 设置了 display: flex 的父元素(在本例中是 <section> )被称之为 *flex 容器(flex container)。
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项 ( flex item )
     

常用的属性

flex-direction(指定弹性容器中子元素排列方式)

row 默认值。元素将水平显示,正如一个行一样。
   row-reverse 以相反的顺序。
   column 元素将垂直显示,正如一个列一样。
   column-reverse 与 column 相同,但是以相反的顺序。

flex-wrap (属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。)

nowrap默认值。规定元素不拆行或不拆列。
  wrap规定元素在必要的时候拆行或拆列。
  wrap-reverse规定元素在必要的时候拆行或拆列,但是以相反的顺  序。

align-items 属性定义flex子项在flex容器的当前行纵轴方向上的对齐方式,就是规定上下排行的样式。

stretch 默认值。项目被拉伸以适应容器。
   center 项目位于容器的中心。
   flex-start 项目位于容器的开头。
   flex-end 项目位于容器的结尾。
   baseline 项目位于容器的基线上。

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start 项目位于容器的开头。
  flex-end 项目位于容器的结尾。
  center 项目位于容器的中心。
  space-between 项目位于各行之间留有空白的容器内。
  space-around 项目位于各行之前、之间、之后都留有空白的容器内。

弹性子元素属性

1.order属性

.flex-container .flex-item { order: <integer>; }

<integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

2.align-self设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。(跟那个align-items类似)

以上就是详解CSS3弹性伸缩盒的详细内容,更多关于CSS3弹性伸缩盒的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
You might like
Yii框架form表单用法实例
2014/12/04 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python实现处理管道的方法
2015/06/04 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
彻底解决Python包下载慢问题
2020/11/15 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
总经理年会致辞
2015/07/29 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS