详解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 相关文章推荐
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
详解PHP数组赋值方法
2015/11/07 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
jqgrid 表格数据导出实例
2013/11/21 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
店面销售职位的职责
2014/03/09 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
导游词之天津古文化街
2019/11/09 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python