安达市建设局网站,360建筑网是什么,wordpress小夜,如何给自己做网站系列文章目录
前端系列文章——传送门 CSS系列文章——传送门 文章目录系列文章目录弹性盒模型#xff08;FlexibleBox 或 flexbox#xff09;什么是弹性盒#xff1f;基本配置项给父元素添加给子元素添加弹性盒案例滚动条青蛙网页练习旧的弹性盒display:box 属性浏览器的兼…系列文章目录
前端系列文章——传送门 CSS系列文章——传送门 文章目录系列文章目录弹性盒模型FlexibleBox 或 flexbox什么是弹性盒基本配置项给父元素添加给子元素添加弹性盒案例滚动条青蛙网页练习旧的弹性盒display:box 属性浏览器的兼容性参考文献弹性盒模型FlexibleBox 或 flexbox
什么是弹性盒 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成 弹性容器通过设置display·属性的值为flex或inline-flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 注意弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
基本配置项
给父元素添加 display:flex/inline-flex; flex将对象作为弹性伸缩盒显示inline-flex将对象作为内联块弹性伸缩盒显示 需要注意的是子元素的 width、float、clear 和 vertical-align 属性将会失效 flex-direction (主轴排列方向) row 默认横向一行排列row-reverse 反转横向排列column 纵向排列column-reverse 反转纵向排列 justify-content(主轴对齐方式) flex-start默认顶端对齐flex-end末端对齐center居中对齐space-between两端对齐中间自动分配space-around自动分配距离 *默认元素在主轴上容不下不会换行会被压缩 flex-wrap设置换行 nowrap 容器为单行该情况下子项可能会溢出容器wrap 容器为多行子项内部会发生断行wrap-reverse 反转排列 align-items(侧轴对齐方式) flex-start 侧轴起始边界flex-end 侧轴结束边界center 居中放置baseline 基线对齐stretch 默认值项目被拉伸以适应容器 align-content(行与行之间对齐方式) flex-start 没有行间距flex-end 底对齐没有行间距center 居中没有行间距space-between 两端对齐中间自动分配space-around 自动分配距离stretch 默认值项目被拉伸以适应容器
给子元素添加 align-self 灵活容器内被选中项目的对齐方式 –可重写灵活容器的align-items属性 auto 默认值元素继承了它的父容器的align-items属性stretch 元素被拉伸以适应容器center 元素位于容器的中心flex-start 元素位于容器的开头flex-end 元素位于容器的结尾 order 排序优先级 数字越大越往后排默认为0支持负数 flex-grow 项目的放大比例 flex-grow:1; 同flex:1;–放大比例 flex-shrink 项目的缩小比例 flex-shrink:0;元素不缩小 flex-basis 项目的长度 flex为 3 4 5 的简写形式 默认值flex:0 1 auto; 缩写「flex: 1」, 则其计算值为「1 1 0」 缩写「flex: auto」, 则其计算值为「1 1 auto」 缩写「flex: none」, 则其计算值为「0 0 auto」 缩写「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」即「flex」初始值
弹性盒案例
滚动条
::-webkit-scrollbar { display: none; } 作用使滚动条消失青蛙网页练习
青蛙过河——帮帮我
旧的弹性盒
display:box 属性
Flexbox(弹性盒子)非常出色并且肯定是布局未来的一部分。 在过去的几年中语法发生了很大变化因此出现了[“旧”和“新]语法。 但是如果我们将旧的新的和介于两者之间的语法组合在一起则可以得到不错的浏览器支持。
注 1. W3C很久以前就有一个display:box属性 2. flex是最新的但是在实际的浏览器测试中display: flex 不能完全替代 display: -webkit-box
接下来我们先去了解一下旧的弹性盒子 display:box;
常用的有以下属性 display:-webkit-box 父元素设置该属性后作用与display:flex类似子元素可在一行显示且实现自适应 -webkit-box-orient:horizontal/vertical 父元素设置该属性后作用与flex-direction: column相似。使子元素排列方向发生变化 horizontal 水平排列子代总width父级width。若父级固定宽度则子代设置的width无效子代会撑满父级宽度 vertical 垂直排列子代总height父级height。若父级固定高度则子代设置的height无效子代会撑满父级高度 -webkit-box-direction 在父级上设置该属性作用使改变子元素的排列顺序 normal 默认值子代按html顺序排列1234 reverse 反序所有元素相反顺序来4321 box-align:start/end/center/stretch 在父级设置子代的垂直对齐方式。 start 垂直顶部对齐 end 垂直底部对齐 center 垂直居中对齐 stretch 拉伸子代的高度与父级设置的高度一致。子代height无效。 注我们一般多使用box-align:center;来实现子元素的垂直居中。 Flex布局align-items: center; -webkit-box-pack 在父级设置子代的水平对齐方式。 start 水平左对齐 end 水平右对齐 center 水平居中对齐 justify 在box-pack表示水平等分父容器宽度 唯一遗憾的是firefox与opera暂时不支持只有safari、chrome支持 注我们一般多使用box-pack:center来实现子元素水平居中方式 Flex布局justify-content: center; -webkit-box-flex: 1占用剩余部分 作用与flex: 1;相同 若子元素设置固定宽高则子元素按照该子元素的宽和高 若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间 设置为1则为所有剩余空间可以为负数 若子元素有margin值则按余下父级宽度-子代固定总宽度-总margin值宽度占number份
浏览器的兼容性
大家不难发现display:box属性与display:flex属性几乎一模一样 就下来就会有人问了这两个一样的东西到底有什么区别呢
前者是flex 2012年的语法也将是以后标准的语法大部分浏览器已经实现了无前缀版本。 后者是2009年的语法已经过时是需要加上对应前缀的。
所以兼容性的代码大致如下 display: -webkit-box; /* Chrome 4, Safari 3.1, iOS Safari 3.2 / display: -moz-box; / Firefox 17- / display: -webkit-flex; / Chrome 21, Safari 6.1, iOS Safari 7, Opera 15/16 / display: -moz-flex; / Firefox 18 / display: -ms-flexbox; / IE 10 / display: flex; / Chrome 29, Firefox 22, IE 11, Opera 12.1/17/18, Android 4.4 */
如果要说区别displaybox 是老规范要兼顾古董机子就加上它 flexbox flex 是新规范老机子不支持的
参考文献
Flex 布局 W3C 2009 年第 1 次草案display:box; W3C 2011 年第 2 次草案display:flexbox | inline-flexbox; W3C 2012 年第 5 次草案及以后的候选推荐标准display:flex | inline-flex;
