详解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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
第十三节--对象串行化
2006/11/16 PHP
PHP Google的translate API代码
2008/12/10 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
详解javascript void(0)
2020/07/13 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
25道Java面试题集合
2013/05/21 面试题
日语求职信范文
2013/12/17 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js