CSS3-flexbox布局

flexbox的术语

1. 伸缩容器一个设有display:flexdisplay:inline-flex的元素

2. 伸缩项目伸缩容器的子元素

3. 主轴主轴方向用户代理沿着一个伸缩容器的主轴配置伸缩项目主轴是主轴方向的延伸

4. 主轴起点主轴终点伸缩项目的配置从容器的主轴起点边开始往主轴终点边结束

5. 主轴长度主轴长度属性伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度伸缩项目的主轴长度属性是widthheight属性由哪一个对着主轴方向决定

6. 侧轴侧轴方向与主轴垂直的轴称作侧轴是侧轴方向的延伸

7. 侧轴起点侧轴终点填满项目的伸缩行的配置从容器的侧轴起点边开始往侧轴终点边结束

8. 侧轴长度侧轴长度属性伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度伸缩项目的侧轴长度属性是「width」「height」属性由哪一个对着侧轴方向决定

flex-flow

flex-flow属性是同时设定“flex-direction(伸缩流的方向)”“flex-wrap(伸缩行换行)”属性的缩写两个属性决定了伸缩容器的主轴与侧轴

flex-direction:row/row-reverse/column/column-reverse;

flex-wrap:nowrap/wrap/wrap-reverse;

设置flexbox子元素伸缩项目的对齐

侧轴对齐伸缩项目——align-items

flex-start/baseline:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边

flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边

center:伸缩项目的外边距盒在该行的侧轴上居中放置。(如果伸缩行的尺寸小于伸缩项目则伸缩项目会向两个方向溢出相同的量)。

stretch:伸缩项目拉伸填满整个侧轴

主轴对齐伸缩项目——justify-content

flex-start:伸缩项目向一行的起始位置靠齐该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐同时所有后续的伸缩项目与其前一个项目对齐

flex-end:伸缩项目向一行的结束位置靠齐该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐同时所有前面的伸缩项目与其后一个项目对齐

center:伸缩项目向一行的中间位置靠齐该行的伸缩项目将相互对齐并在行中居中对齐同时第一个项目与该行的在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离如果剩余空间是负数则保持两端溢出的长度相等)。

space-between:第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布

space-around:伸缩项目会平均地分布在行里两端保留一半的空间


改变元素布局的顺序

order属性可以修改伸缩项目的布局顺序在不调整结构前提之下)。

默认情况之下所有的伸缩项目的顺序组都是“0”,可以给每个伸缩项目设置不同的顺序值更高的值会排在后面而原来的HTML结构并不会有任何变化


使你的元素具有弹性

flex-flow属性设置伸缩项目的流动方向

flex属性设置一个可用的空间它的取值可以有三个部分 flex-grow、flex-shrink、flex-basis


关于flex

1. flex-grow:此属性值为正数值用来设置扩展比率也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例若省略则会被设置为“1”。

2. flex-shrink:此属性值为正数值用来设置收缩比率也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例若省略则会被设置为“1”,在收缩的时候收缩比率会以伸缩基准值加权

3. flex-basis:width属性使用相同的值可以用来设置flex-basis长写并指定伸缩基准值也就是根据可伸缩比率计算出剩余空间的分布之前伸缩项目主轴长度的起始数值若在flex缩写省略了此属性设置flex-basis的指定值是“0”,flex-basis的指定值是“auto”,则伸缩基准值的指定值是元素主轴长度属性的值

博主设置当前文章不允许评论。

没有更多推荐了,返回首页