发表于： 2017-06-16 22:55:01
1 1074
明天计划的事情：
先搞定侧边栏和新的路由地址，然后开始做模块管理。
一、背景介绍
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现. 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。它已经得到了几乎所有浏览器最新版本的支持，但是考虑历史版本，在部分浏览器上兼容性不太好，需要在代码中添加浏览器支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 row默认值,水平方向左至右 row-reverse水平方向右至左 column垂直方向,上至下排列 ccolumn-reverse垂直方向,下至上排列 nowrap默认值,不换行 wrap换行显示 wrap-reverse逆序换行显示 center水平居中对齐 flex-start水平靠左对齐 flex-end水平靠右对齐 space-around水平均匀分布 space-between水平两端对齐 stretch默认值，拉伸等高,占满容器高度 flex-start垂直顶部对齐 flex-end垂直底部对齐 center垂直居中对齐 baseline项目的第一行文字的基线对齐 stretch默认值,拉伸,占满容器高度，项目高度由项目内容决定 flex-start垂直顶部对齐 flex-end垂直底部对齐 center垂直居中对齐 space-between垂直两端对齐 space-around垂直轴均匀分布 order子元素排列顺序（默认值为0） 设置的值越小越靠前 flex-grow子元素扩展比例 剩余宽度 * 占比值/总比值 默认值为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 盒子1设置flex-grow:1的时候单独分配剩下的所有空间 flex-shrink子元素收缩比例 溢出宽度 * 占比值/总比值 默认值为1,即如果空间不足，该项目将缩小。都为1的话，均匀缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 父级宽度为300px,子级为100px,收缩后宽度为300*1/4=75px flex-basis align-self 为子元素设置width:100%;且overflow:hidden; 详情见视频 一般实现垂直居中是一件很麻烦的事，但flex布局轻松解决 既然各大主流浏览器最新版本已经支持了flexbox，那么有没有必要在代码中进行兼容写法？
二、知识剖析
1、Flex布局是什么？
2、基本概念
3. 父级属性
4 .子级属性
5. 属性详解
flex-direction
flex-wrap
justify-content
align-items
align-content
demo1
demo1三、常见问题
四、解决方案
五、编码实战
六、拓展思考
flex布局最常用的是什么场景？
display:flex;
justify-content: center;
align-items: center; 七、参考文献
flex实例--阮一峰的个人博客
css之flex兼容更多讨论
flex兼容性写法
元素兼容写法
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
子元素兼容写法
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
返回列表
评论