详解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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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 信息采集程序代码
2009/03/17 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
招聘单位介绍信
2014/01/14 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
社团活动总结模板
2014/06/30 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
个人委托函范文
2015/01/29 职场文书
公司酒会致辞
2015/07/30 职场文书