当前位置:   article > 正文

web----弹性盒子_web弹性盒子

web弹性盒子

设置主轴方向

flex-direction:row(默认)   起点在左端(水平方向)

                      row-reverse 起点在右端(水平方向)

                      column:竖直方向 起点在上边

                      column-reverse 竖直方向 起点在下边

设置子元素是否换行  默认no-wrap 

 flex-wrap:wrap;

justify-content: flex-start 默认  轴起点对齐

                        flex-end   轴终点对齐

                        center     居中

                        space-between 两端对齐 中间元素间隔相等

                        space-around  每个元素之间间隔相等

                        space-evenly  每个元素之间间隔相等 两端距离也相等

交叉轴对齐方式

align-items: flex-start  默认 轴起点对齐(上边)

                   flex-end    轴终点对齐(下边)

                   center      垂直居中

                   baseline    (项目第一行)文本的下基准线对齐

调整换行的排列方式 

align-content: flex-start;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/839332
推荐阅读
相关标签
  

闽ICP备14008679号