摘要：注本文章按照菜鸟教程布局语法教程为原型稍加修改以方便自己学习菜鸟教程地址年，提出了一种新的方案布局，可以简便完整响应式地实现各种页面布局。
注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性.
flex布局 : .box{display:flex;}
行内元素也可以使用flex布局 : .box{display:inline-flex;}
Webkit内核的浏览器，必须加上-webkit前缀 : .box{display:-webkit-flex; display:flex;}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
Flex容器(flex container) : 采用Flex布局的元素,称为flex容器.
Flex项目(flex item) : flex容器的所有子元素,自动成为容器成员,即flex项目.
容器的两根轴线 : 水平的主轴(main axis), 垂直的交叉轴(cross axis).
主轴(main axis) : 开始位置->main start, 结束位置->main end, 项目默认沿主轴排列.
交叉轴(cross axis) : 开始位置->cross start, 结束位置->cross end
容器内的单个项目占据的主轴空间叫做->main size, 交叉轴空间叫做->cross size
flex属性分为容器属性和项目属性.
容器属性 : flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
项目属性 : order, flex-grow, flex-shrink, flex-basis, flex, align-self
flex-direction : 决定主轴的方向(即项目排列方向)
row : 水平方向,从左到右.(默认属性)
row-reverse : 水平方向,从右到左.
column : 垂直方向,从上到下.
column-reverse : 垂直方向,从下到上.
flex-wrap : 规定一条轴线排不下,如何换行.
nowrap : 不换行(默认属性)
wrap : 换行,第一行在上边
wrap-reverse : 换行,第一行在下边,(只行数排列相反,单行内依旧从左到右排列,每一行都是).
flex-flow : 结合flex-direction和flex-wrap,写法如下
.box{flex-flow:column wrap-reverse}
justify-content : 定义项目在主轴上的对齐方式
flex-start : 左对齐(默认值),项目以主轴的起点对齐
flex-end : 右对齐,项目以主轴的终点
center : 居中
space-between : 两端对齐,项目之间间隔相等
space-around : 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items : 定义项目在交叉轴的对齐方式(仅单行,多行对齐由align-content定义)
stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度(默认值)
flex-start : 从上到下,以交叉轴的起点为基线,向终点延伸
flex-end : 从下到上,以交叉轴的终点为基线,向起点延伸
center : 交叉轴的中点对齐,项目的中点放在交叉轴的中点上
baseline : 以一行中每个项目的第一行文字进行对齐.
align-content : 定义了容器内有多行项目时沿交叉轴的对齐方式, 如果项目只有一根轴线，该属性不起作用
stretch : 轴线占满整个交叉轴(每行都有一条轴线), 默认属性
flex-start : 以交叉轴的起点对齐
flex-end : 以交叉轴的终点对齐
center : 以交叉轴的中点对齐
space-between : 多行项目在交叉轴上间隔平均分布
space-around : 多行项目在交叉轴上两侧的间隔都相等。所以，项目在交叉轴上的间隔比项目与边框的间隔大一倍
注 : justify-content, align-items和align-content是容器的属性,而不是项目的属性,是设定一个容器内项目以轴线上的某一位置对齐
order : 定义项目的排列顺序,数值越小,排列越靠前.默认值为0,写法如下
.item{order:5}
flex-grow : 定义属性项目放大比例,默认为1
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink : 定义项目缩小比例,默认为1
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小.负值对该属性无效
flex-basis : 定义了在分配多余空间之前，项目占据的主轴空间（main size）,浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
flex : 结合flex-grow, flex-shrink 和 flex-basis的属性, 默认值为0 1 auto, 推荐优先使用
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex: 1; ==>意思是伸缩比(flex-grow和flex-shrink)为1,剩余空间占比(flex-basis)为1
align-self : 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
该属性可能取6个值，除了auto，其他都与align-items属性完全一致
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1025.html
摘要：年，提出了一种新的方案，是的缩写，意为弹性布局。它的所有子元素自动成为容器成员，称为项目，简称项目。属性分为两部分，一部分作用于容器称容器属性，另一部分作用于项目称为项目属性。表示不缩小，负值无效。后两个是可选属性。相关资源布局语法教程 简言 布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一...
摘要：总之有了基础，理解弹性布局蛮容易的。语法格式当容器的设置了溢出换行属性，且当前在交叉轴方向上存在多行的情况下，该属性才会生效。 本篇文章已授权微信公众号 dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入门跟...
摘要：默认值如果项目未设置高度或设为，将占满整个容器的高度。与交叉轴两端对齐，轴线之间的间隔平均分布。该属性有两个快捷值和。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。该属性可能取个值，除了，其他都与属性完全一致前几天看了阮一峰的Flex布局教程，讲的很不错，总结一下,有兴趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-gram...
摘要：布局教程语法篇修改转载自阮一峰老师的博客网页布局是的一个重点应用。布局的传统解决方案，基于盒状模型，依赖属性属性属性。一布局是什么是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。二基本概念采用布局的元素，称为容器，简称容器。 Flex 布局教程：语法篇（修改转载自阮一峰老师的博客）网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 displ...
摘要：不完全脱离文档流浮动后的结果当目标标签的内部有浮动的子级，目标标签的兄弟标签的布局会出现显示异常在不做清浮动的情况下，父级不会获取子级的高度。一、文档流(normal flow) 1.概念 将窗体自上而下分成一行一行，块级元素从上至下，行内元素在每行中从左至右顺序排放元素 本质为normal flow(普通流，常规流)，文档流就是一个连续具有逻辑上下的页面整体，也可以片面的说，出现在页面中的...
阅读 2269·2019-08-30 15:56
阅读 3107·2019-08-30 13:48
阅读 1122·2019-08-30 10:52
阅读 1489·2019-08-29 17:30
阅读 416·2019-08-29 13:44
阅读 3527·2019-08-29 12:53
阅读 1112·2019-08-29 11:05
阅读 2666·2019-08-26 13:24
