深入剖析CSS弹性盒模型flex

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,弹性盒模型,flex等相关知识,佚名希望在学习及工作中可以帮助到您

CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕

版本更迭 flexbox布局的语法规范经过几年发生了很大的变化。从2007年07月，flex第一版本的工作草案发布，到2012年09月，flex最新版本成为候选推荐。flex主要经历了三个版本

【1】旧版本 display:box | inline-box;

该版本IE浏览器不支持，且其他浏览器和移动端都需要添加前缀，但移动端可以兼容到andriod2.1和ios3.2

【2】混合版本 display:flexbox | inline-flexbox;

该版本只有IE10支持，且需要添加前缀-ms-

【3】新版本 display: flex | inline-flex

该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-

display要让一个元素变成伸缩容器，需要使用display属性。采用flex布局的元素，称为伸缩容器(flex container)，容器内的子元素称为伸缩项目(flex item)

[注意]浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目

使用flex布局实现上是使元素FFC化(flex formatting context伸缩格式化上下文)，FFC是普通流的一种。而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点:

[1]float、clear和vertical-align属性在伸缩项目上没有效果

[2]伸缩容器的margin与其内容的margin不会重叠

[3]text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器

[4]另外，conlumns属性伸缩容器上没有效果

弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别，一个独占一行，另一个非独占一行

//弹性盒模型: 块级伸缩容器 | 内联伸缩容器
//新版本
display: flex | inline-flex;
//混合版本
display: flexbox | inline-flexbox;
//旧版本
display: box | inline-box;

基本概念

伸缩容器默认存在两条轴: 水平的主轴(main axis) 和垂直的侧轴(cross axis)

[注意]主轴方向不一定是水平的，它主要取决于justify-content属性

主轴起点叫main start，主轴终点叫main end；侧轴起点叫cross start，侧轴终点叫cross end

伸缩项目默认沿主轴排列。单个伸缩项目占据的主轴空间叫main size ，占据的侧轴空间叫cross size

[注意]伸缩项目的main size和cross size主要由宽度或高度决定

伸缩容器以下6个属性作用在伸缩容器上

伸缩流方向 flex-direction

伸缩流换行 flex-wrap

伸缩流(包括方向与换行) flex-flow

主轴对齐 justify-content

侧轴对齐 align-items

堆栈伸缩行 align-content

【1】伸缩流方向:指定主轴的方向(即伸缩项目在伸缩容器中的排列方向)

//伸缩流方向: 水平方向 | 反向水平 | 垂直方向 | 反向垂直
//新版本同混合版本
flex-direction: row[默认] | row-reverse | column | column-reverse
//旧版本
box-orient: horizontal(水平) |vertical(垂直) |inline-axis[默认](内联轴方向) |block-axis(块级轴方向)
box-direction: normal(正常) | reverse(反向)