Apr 25 2015

CSS的box-flex属性

css的布局方式很多，常用布局可以完成大部分的需求，但是很麻烦，维护不方便。最近在看react-native，在react-native里有一个css-layout的工具，可以把css的flexbox布局编译成c或者java，这样flexbox就不止是用在dom布局上了。Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。

flexbox希望容器内部的元素可以用最好的方式去排列，可以去适应各种分辨率和尺寸的屏幕。但是因为兼容性问题，所以一般用在了

且不谈在各个平台上的flexbox是怎么实现的，先来说说flexbox的一些概念。

flexbox基础

flexbox是整个一个模块，而不只是一个css属性。一个flexbox模块需要容器和子元素组成。

我们来看w3c官方提供的对flexbox的解释的图片

每个flexbox都有一个主轴和侧轴，我们可以调整主轴方向选择不同排列方式。

属性

display

1	display: flex \| inline-flex;

设置一个flexbox容器，这个容器可以是块元素，也可以是内联元素。但是因为涉及到兼容性问题，一般我们都会完整的写一个css

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

flex-direction

在flexbox容器上我们可以设置flex主轴方向,属性 : flex-direction

flex-direction属性可以有这几个值：
row：横向；
column：纵向;

-moz-flex-direction :    row;
-ms--flex-direction: row; 
-webkit-flex-direction: row;
flex-direction:         row;

flex-wrap

同样是设置在容器上的属性

这个主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

nowrap(默认值)：伸缩容器单行显示，“ltr”排版下，子元素从左到右排列；“rtl”排版上子元素从右向左排列。
wrap：伸缩容器多行显示，“ltr”排版下，子元素从左到右排列；“rtl”排版上子元素从右向左排列。
wrap-reverse：伸缩容器多行显示，“ltr”排版下，子元素从右向左排列；“rtl”排版下，子元素从左到右排列。（和wrap相反）

flex-flow

这个属性可以把上面2个属性合并起来写

1	flex-flow: <‘flex-direction’> \|\| <‘flex-wrap’>

justify-content

设置在容器上用来定义子元素在容器内沿着主轴的对齐方式。

flex-start(默认值)：子元素向一行的起始位置靠齐。
flex-end：子元素向一行的结束位置靠齐。
center：子元素向一行的中间位置靠齐。
space-between：子元素会平均地分布在行里。第一个子元素一行中的最开始位置，最后一个子元素在一行中最终点位置。
space-around：子元素会平均地分布在行里，两端保留一半的空间。

align-item

使用在在父元素上，就是一个侧轴上的justify-content属性，但是值略不一样。

flex-start：子元素在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end：子元素在侧轴终点边的外边距靠住该行在侧轴终点的边。
center：子元素的外边距盒在该行的侧轴上居中放置。
baseline：子元素根据他们的基线对齐。
stretch（默认值）：子元素拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content

这个属性也是在父元素上，在有多行子元素的情况下，对行的对齐方式做安排

flex-start：各行向伸缩容器的起点位置堆叠。
flex-end：各行向伸缩容器的结束位置堆叠。
center：各行向伸缩容器的中间位置堆叠。
space-between：各行在伸缩容器中平均分布。
space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。
stretch（默认值）：各行将会伸展以占用剩余的空间。

flex-item的css属性

order

设置一个值，安排排列顺序

flex

flex可以设置3个值

“flex-grow”、“flex-shrink”和“flex-basis”

flex-grow:是一个不带单位的比例主要用来定义flex-item的伸缩比例。

flex-shrink:根据需要用来定义flex-item收缩的能力。缺省是1

flex-basis:这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。默认:auto;

align-self

子元素的对齐方式，可以覆盖父元素的值

1	align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch