H5手机端开发知识总结(三)

flex布局兼容知识点总结

==假设父容器class为box，子项目为item==

一、定义容器的display属性

.box{    display: -webkit-flex;    displau: flex;}

二、容器样式

.box{    flex-direction: row | row-reverse | column | column-reverse;    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/        flex-wrap: nowrap | wrap | wrap-reverse;    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/    flex-flow: <flex-direction>  <flex-wrap>;    /*主轴方向和换行简写*/    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/    align-content: flex-start | flex-end | center | space-between | space-around | stretch;    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/}

flex-direction值详情如下：
row: 默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse: 与 row 相同，但是以相反的顺序。
column: 灵活的项目将垂直显示，正如一个列一样。
column-reverse: 与 column 相同，但是以相反的顺序。

flex-wrap 值详情如下:
nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。
wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse： 换行并第一行在下方

flex-flow值详情如下(主轴方向和换行简写)：
<flex-direction>: 定义弹性盒子元素的排列方向
<flex-wrap>：控制flex容器是单行或者者多行。

justify-content值详情如下：
flex-start: 弹性盒子元素将向行起始位置对齐。
flex-end: 弹性盒子元素将向行结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐。
space-between: 第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，
而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around: 伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其余空白空间的一半。

align-items值详情如下:
flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（假如该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参加基线对齐。
stretch: 假如指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

align-content值详情如下:
flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（假如该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
space-between: 第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，
剩余的行则按肯定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around: 各行会按肯定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其余空间的一半。
stretch: 各行将会伸展以占用剩余的空间。假如剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

三、子元素属性

.item{    order: <integer>;    /*排序：数值越小，越排前，默认为0*/    flex-grow: <number>; /* default 0 */    /*放大：默认0（即假如有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/    flex-shrink: <number>; /* default 1 */    /*缩小：默认1（假如空间不足则会缩小，值为0不缩小）*/    flex-basis: <length> | auto; /* default auto */    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/    align-self: auto | flex-start | flex-end | center | baseline | stretch;    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/}}

相关链接

H5手机端开发知识总结(一)

H5手机端开发知识总结(二)

H5手机端开发知识总结(三)