前端学习笔记——flex布局常用属性

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属性定义项目的排列顺序。数值越小，排列越靠前，默认为零。

越小越在前。