详解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 特效范例整理
Aug 22 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
封装一个PDO数据库操作类代码
2009/09/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
解析vue中的$mount
2017/12/21 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python中for循环详解
2014/01/17 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python 学习教程之networkx
2019/04/15 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
员工团队活动方案
2014/08/28 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
父母教会我观后感
2015/06/17 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书