flex布局
对于某个元素只要声明了display: flex;
,那么这个元素就成为了弹性容器,具有flex弹性布局的特性 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。每根轴都有起点和终点,这对于元素的对齐非常重要。弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列
flex属性
容器属性
-
flex-flow
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
-
flex-direction
取值:row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为倒序3-2-1。column 与row相反,为纵向排列,项目顺序为正序1-2-3,column-reverse同为纵向排列,项目顺序为倒序3-2-1。
-
flex-wrap
取值:nowrap(默认) | wrap | wrap-reverse,可使得主轴上的元素不换行、换行、反向换行。
-
ju