css flexbox 总结

引言

本文主要对css flexbox的关键点了总结,方便以后在以后的查阅。

容器的属性

对于容器需要指定其显示方式为flexbox

display: flex;

指定flex排列的方向、在排列时是否会换行,使用 flex-flow 可以快速设置二者属性

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>;

用于调整主轴方向的排布(对于 row 来说就是横向,对于 column 来说就是纵向)

justify-content: flex-start | flex-end | center
	       | space-between | space-around | space-evenly;

用于调整相交轴方向的行间排布(对于 row 来说就是纵向,对于 column 来说就是横向)

align-content: flex-start | flex-end | center
	     | stretch | space-between | space-around;

用于调整相交交轴方向的单行对齐方式。需要注意的是其中 centerbaseline 的区别: 二者都表示居中,而 baseline 会保证所有文字的底边处在同一条线上。

align-items: flex-start | flex-end | center | baseline | stretch;

条目的属性

用于调整顺序

order: <integer>; /* default 0 */

用于调整每个条目的伸展程度

flex-grow: <number>; /* default 0 */

用于调整每个条目的缩小程度

flex-shrink: <number>; /* default 1 */

用于调整每个条目的默认尺寸

flex-basis: <length> | auto; /* default auto */

设置flex属性,排列顺序为 flex-grow , flex-shrink , flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

用于重载容器的 align-items 的设置

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

Comments

Comments powered by Disqus