flex布局,less语言

 

弹性盒子和less预处理语言

弹性盒子

弹性盒子是CSS3的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。

display:flex/inline-flex

设置flex布局后，子元素的float、clear和vertical-align属性将失效

.box{ display: flex; }
.box{ display: inline-flex; }

容器属性(设置在父元素上面)

flex-direction 决定主轴的方向(即项目的排列方向)

row （默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

justify-content 定义了项目在主轴上的对齐方式

flex-start （默认值）：左对齐。

flex-end：右对齐。

center： 居中。

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的 间隔大一倍

space-evenly : 所有间隔都相等，包括项