详解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教程之倾斜页面
Jan 27 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 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
无线电广播的开始
2002/01/30 无线电
PHP session会话的安全性分析
2011/09/08 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php MessagePack介绍
2013/10/06 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
就业自荐书
2013/12/05 职场文书
小学体育教学反思
2014/01/31 职场文书
超越自我演讲稿
2014/05/21 职场文书
数学系毕业生求职信
2014/05/29 职场文书
法人授权委托书范本
2014/09/17 职场文书
中学生检讨书范文
2014/11/03 职场文书
英文慰问信
2015/02/14 职场文书
教师个人自我评价
2015/03/04 职场文书