flex 布局原理:

flex 是 flexible Box的缩写 ,弹性布局,任何容器都可以指定为felx布局。

注意:

1.当为父盒子设置flex布局后,子元素的float,clear,vertical-align属性将失效。

2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex布局父项常见属性

flex-direction:设置主轴的方向

justify-content:设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行

align-content:设置侧轴上的子元素的排列方式(多行)

align-items:设置侧轴上的子元素排列方式(单行)

flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrapflex .

flex-direction

设置主轴的方向,默认主轴是x轴水平向右,侧为y向下

属性值及说明:

row 设置X轴为主轴,从左到右显示(默认)
column 设置Y轴为主轴 从上到下显示

row-reverse 设置X轴为主轴 从右到左显示
column-reverse 设置Y轴为主轴 从下到上显示

justify-content

设置主轴上的子元素排列方式

属性值及说明:

flex-start 从左到右或从上到下显示(默认)

flex-end 从右到左或从下到上显示

center 水平居中或垂直居中显示

space-around 平分剩余空间

space-between 先两边贴边,再平分剩余空间(重要)

flex-wrap

设置子元素是否换行

属性值及说明:

nowrap 不换行(默认)
wrap 换行

align-content(侧轴多行)

设置侧轴上的子元素的排列方式(多行),单行下没有效果。

属性值及说明:

flex-start 从左到右或从上到下显示

flex-end 从右到左或从下到上显示

center 水平居中或垂直居中显示

stretch 设置子项元素高度,平分父级元素高度

space-around 平分剩余空间

space-between 先两边贴边,再平分剩余空间

align-items(侧轴单行)

设置侧轴上的子元素排列方式(单行)

属性值及说明:

flex-start 从左到右或从上到下显示

flex-end 从右到左或从下到上显示

center 水平居中或垂直居中显示

streth 拉伸(拉成和父级相同高度或宽度,tip:子盒子不要给宽度/宽度)

flex-flow

复合属性,相当于同时设置了 flex-direction 和 flex-wrap .

flex布局子项常见属性

flex(重要)

flex属性定义子项分配的剩余空间,用flex来表示占多少份

默认值:0;

align-self

align-self 控制子项自己在侧轴上排列的方式。align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items属性。

order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为零。

越小越在前。


菜菜子新人