flex布局
flex-direction(适用于父类容器的元素上)- 确定主轴的方向 flex-direction: row | row-reverse | column | column-reverse row(默认):主轴为水平方向,从左到右 row-reverse：主轴为水平方向.从右到左 column：主轴为垂直方向,从上到下 column-reverse：主轴为垂直方向,从下到上
flex-wrap(适用于父类容器上)- 伸缩盒对象的子元素超出父容器时是否换行 flex-wrap: nowrap | wrap | wrap-reverse nowrap：当子元素溢出父容器时不换行。 wrap：当子元素溢出父容器时自动换行。 wrap-reverse：反转 wrap 排列,(下一行位置与交叉轴位置相反)
-flex-flow (适用于父类容器上)
- flex-flow: <‘flex-direction’> || <‘flex-wrap’> [ flex-direction ]：定义弹性盒子元素的排列方向。 [ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。
flex-flow: row wrap;复制代码
- justify-content (适用于父类容器上)
- 确定在主轴方向上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around flex-start：该行起始位置 flex-end：该行结束位置 center：该行中央,空间不足,则超出空间 space-between：平均地分布在行里 space-around：平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。 space-evenly:平均分布在行里，两端间距和元素间间距一样
align-items(适用于子类容器上)- 确定在交叉轴上的对齐方式 align-items: flex-start | flex-end | center | baseline | stretch flex-start：交叉轴的起始位置 flex-end：交叉轴的结束位置 center：在交叉轴居中 baseline：在基准线上保持对齐 stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得盒子在交叉轴方向上尽可能地占满。 space-evenly:平均分布在行里，两端间距和元素间间距一样
align-content(适用于父类容器上)- 用来处理交叉轴空白空间 对单行不起作用 align-content: flex-start | flex-end | center | space-between | space-around | stretch flex-start：行集中于容器的交叉轴起始位置 flex-end:行集中于容器的交叉轴结束位置 center：行集中于容器的中央 space-between：行在容器中均匀分布。 space-around：行在容器中均匀分布，两端保留子元素与子元素之间间距大小的一半。 stretch：伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。 space-evenly:平均分布在行里，两端间距和元素间间距一样
align-self(适用于子类容器上)- 属性"align-self"的可选值除了align-items列出的之外，还可以设置为"auto"。当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。
用来覆写容器指定的对齐方式
order(适用于弹性盒模型容器子元素)- 用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0
display:flex; flex-direcition 确定主轴的方向 flex-wrap 当子容器超出父容器时如何排列 flex-flow 是flex-direction和flex-wrap的复合属性 order 作用在子容器上,用来改变子容器的排列顺序,值越小,排列越靠前 justify-content 在主轴的排列方式 align-items 在交叉轴的排列方式 align-content 在交叉轴方向上的空白处理,但如果又只有单行时,该属性不起作用 align-self 设置子容器覆盖父容器指定的对齐方式,如果子容器margin值设为auto,则不起作用最后三个是比较重要的,也是弹性盒模型的核心之处,弹性的处理盒子的尺寸细分属性:flex-grow flex-shrink flex-basis上者三个的复合属性:flexflex-grow 有多余空间时,该值起作用flex-shrink 有溢出空间时,该值起作用flex-basis 子容器被调整之前的初始值 复制代码
-
flex-grow(适用于弹性盒模型容器子元素) -
设置或检索弹性盒的扩展比率。 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。 flex-grow: (default 0) ：用数值来定义扩展比率。不允许负值 flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
-
flex-shrink(适用于弹性盒模型容器子元素) -
设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。） flex-shrink: (default 1) 演示：flex-shrink 说明： flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
-
flex(适用于弹性盒模型子元素) -
复合属性。设置或检索伸缩盒对象的子元素如何分配空间。 如果缩写flex:1, 则其计算值为：1 1 0% flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] none：none关键字的计算值为:
0 0 auto[ flex-grow ]：定义弹性盒子元素的扩展比率。默认值：0 [ flex-shrink ]：定义弹性盒子元素的收缩比率。默认值：1 [ flex-basis ]：定义弹性盒子元素的默认基准值。默认值：auto,若为auto则以width的值为基准扩展收缩，其他情况均以flex-basis为基准
flex:atuo ->flex:1 1 atuo flex:none -> flex:0 0 auto flex:1 -> flex:1 1 0% flex:0% -> flex:1 1 0% flex: 2 100px ->flex: 2 1 100px 复制代码