Flex 指南

Flex布局学习与实践

标签: 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/CSSFlexibleBoxLayout
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS
FlexibleBoxLayout/UsingCSSflexible_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个属性:

对于容器:

<ul>  
<li>flex-direction:row | row-reverse | column | column-reverse;</li>  
<li>flex-wrap : nowrap | wrap | wrap-reverse;</li>  
<li>flex-flow : &lt;flex-direction&gt; || &lt;flex-wrap&gt;;</li>  
<li>justify-content : flex-start | flex-end | center | space-between | space-around;</li>  
<li>align-items : flex-start | flex-end | center | baseline | stretch;</li>  
<li>align-content : flex-start | flex-end | center | space-between | space-around | stretch;</li>  
</ul>  

对于item:

<ul>  
<li>order</li>  
<li>flex</li>  
<li>flex-grow</li>  
<li>flex-shrink</li>  
<li>flex-basic</li>  
<li>align-self</li>  
</ul>  

版本差异区分写法

原文: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

好,也就这些了。