详解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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
JS变量及其作用域
2017/03/29 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
如何用RxJS实现Redux Form
2018/12/29 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
集体婚礼证婚词
2014/01/13 职场文书
服装促销活动方案
2014/02/23 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
活动简报范文
2015/07/22 职场文书
导游词之无锡东林书院
2019/12/11 职场文书