父元素身上的属性

flex-direction

flex-direction - 控制子元素的排列方式

flex-direction: row | row-reverse | column | column-reverse;
/*
    row(从左到右)  --默认
    row-reverse(从右到左)
    column(从上到下)
    column-reverse(从下到上)
*/

flex-summarize1.jpg

flex-wrap

flex-wrap - 控制子元素占满一行后是否换行

flex-wrap: nowrap | wrap | wrap-reverse;
/*
	nowrap(不换行，占满一行会被挤小)  --默认
    wrap(换行)
	wrap-reverse(换行,第一行在后面)
*/

flex-summarize2.jpg

flex-flow

flex-flow - 为 direction 和 wrap 的接合简写方式

flex-wrap: nowrap | wrap | wrap-reverse;
/*
	flex-flow: flex-direction  flex-wrap
*/

justify-content

justify-content - 控制子元素的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;
/*
	 flex-start(左或上对齐)
	 flex-end(右或下对齐)
	 center(居中对齐)
	 space-between(左右或上下对齐，中间空隙平分)
	 space-around(平分空隙)
*/

flex-summarize3.jpg

align-items

align-items - 控制单行子元素在交叉轴的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;
/*
 	flex-start (垂直轴的头部对齐)
 	flex-end (垂直轴的尾部对齐)
 	center (垂直轴的中心对齐)
 	baseline (每个子元素的第一行文字的基线对齐)
 	stretch (如果子元素没有设置高度或者高度auto，怎沾满父元素的高度)  --默认
 */

flex-summarize4.jpg

align-content

align-content - 控制多行子元素在交叉轴的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;
/*
 	 flex-start (左或上对齐)
 	 flex-end (右或下对齐)
 	 center (居中对齐)
 	 space-between(左右或上下对齐，中间空隙平分)
	 space-around(平分空隙)
 	 stretch (轴线占满整个交叉轴)  --默认
 */

flex-summarize5.jpg

子元素上的属性

order

order - 定义子元素的排列顺序

order: 0;
/*
 	默认值为0，数值越小，越靠前
 */

flex-summarize6.jpg

flex-grow

flex-grow - 定义子元素放大比例

flex-grow: 0;
/*
	默认值为0，表示都不会扩大，注意取值>=0,负数不生效;
	左右排列(row)，只扩大宽;
	上下排列(column)，只扩大高
*/

flex-summarize7.jpg

flex-shrink

flex-shrink - 定义子元素的缩小比例

flex-shrink: 1;
/*
	默认值为1,表示当空间不够时,会缩小;
	设置为0时,空间不足时，不会缩小
*/

flex-summarize8.jpg

flex-basis

flex-basis - 定义子元素的大小

flex-basis: auto;
/*
	默认值为 auto，
	在分配多余空间之前,定义项目占据的空间，一般多和flex-grow、flex-shrink一起使用
	它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
*/

flex

flex - 为 grow、shrink、basis 的接合简写

flex: flex-grow flex-shrink flex-basis;
/*
	默认值为 0 1 auto
	建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
*/

align-self

align-self - 单独设置某子元素的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*
	与在父元素中的align-items类似，只不过是单独设置某元素的对齐方式
*/

flex-summarize9.jpg