Flex布局学习与实践

发布于：blog.lwxyfer.com

css

question
1: 行内的inline-flex
块级元素 与 行内元素 使用的flex 的差异
写前缀时，注意顺序 与css 执行顺序 关系
达成目标：用flex 实现各种经典布局
称为CSS布局模块？？

本文用来了解display各个属性值的用法，但主要内容是探索flex的使用。
完成各种方法实现不同布局。 内联元素 与 块状元素 哪些不同，记录下来。

• position:absolute;
  left:50%;
  transformX:-50%;
• flex
• 的

display：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

下面是flexbox（弹性盒）的语法和实践：

简介： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes
直接展示：http://the-echoplex.net/flexyboxes/

compatibility：
http://caniuse.com/#search=flex
就是IE10一下不兼容

兼容写法：包括手机端浏览器的兼容， 旧版的 -webkit-box 写法

Flex：

简介：

MDN简介：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

全称：CSS Flexible Box Layout 就是弹性盒布局，所以又称为弹性盒，flexbox，又有版本的交叉，名称叫法有一点差别。反正就称为Flex 没问题啦。flex算是css的一个属性，但使用这个属性来布局，我们又称其为flexbox，弹性盒模型，伸缩盒模型。
CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

启用与兼容

参看以下代码解决兼容问题，不同浏览器与不同语法版本！！！

html {
  height: 100%;
} 
body {
  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-align: center; 
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center; 
  /*新版本语法*/
  -webkit-align-items: center;
  align-items: center;
  /*=======水平居中======*/
  /*老版本语法*/
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  /*混合版本语法*/
  -ms-flex-pack: center; 
  /*新版本语法*/
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0;
  height: 100%;
  width: 100% /* needed for Firefox 注意到这里了，所以浏览器的差异导致的问题还需很多hack*/
} 
/*实现文本垂直居中*/
h1 {
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 10rem;
}   

对于兼容性的解决办法：
目前大多数最新浏览器都是支持flex的，当然我认为IE10以下都不是浏览器。另外还有恶心的国产浏览器，PC端的话，就chrome、firefox、360、Opera、世界之窗目前是没有问题的。对于恶心的移动端，那么UC就是最恶心的，但是QQ、百度、360是比较完美的支持的。

所以总的来说，解决兼容：使用最新版的语法。只用加webkit的前缀，不用加-moz-,-ms-,-moz-这三个。那么问题就是要使用旧版语法兼容手机UC。即display:box 然后分别看其他属性的写法。

新版本下12个属性：

对于容器：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

对于item：

• order
• flex
• flex-grow
• flex-shrink
• flex-basic
• align-self

版本差异区分写法

原文：http://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
翻译：http://www.w3cplus.com/css3/designing-css-layout-with-flexbox.html 这里有老版本写法的图表。但这不是重点。
很清楚，但是需要添加 浏览器prefix

来来来，参考链接：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这个好
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
http://www.w3cplus.com/blog/tags/157.html 一系列FLEX文章
http://www.w3cplus.com/css3/a-guide-to-flexbox.html 上面的翻译，对每项进行了详细了解释。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 随便看看

一个看起来好好的玩意：https://github.com/philipwalton/solved-by-flexbox

Note that float, clear and vertical-align have no effect on a flex item.
就上面几个链接已经把flex将的很清楚了。

用flex好玩的地方： http://www.w3cplus.com/css3/animating-flexboxes-the-lowdown.html

好，也就这些了。