详解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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
js数组中去除重复值的几种方法
2020/08/03 Javascript
详解vue v-model
2020/08/31 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python使用fork实现守护进程的方法
2017/11/16 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python中eval与int的区别浅析
2019/08/11 Python
python中dict()的高级用法实现
2019/11/13 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python脚本和网页有何区别
2020/07/02 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
初中教师个人工作总结
2015/02/10 职场文书
旷工辞退通知书
2015/04/17 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL