当前位置:   article > 正文

css弹性布局_css flex 不换行

css flex 不换行

弹性布局

弹性盒子

1.实现弹性布局的前提:

父元素设置display:flex

2.主轴方向:

(1)flex-direction:row (默认) 主轴为水平方向,起点在左端

(2)flex-direction:row-reverse 主轴为水平方向,七点在右端

(3)flex-direction:column 主轴为垂直方向,起点在下边

(4)flex-direction:column-reverse 主轴为垂直方向,起点在下边

3.是否换行:

(1)flex-wrap:nowrap (默认) 不换行

(2)flex-wrap:wrap 换行,第一行在上方

(3)flex-wrap:wrap-reverse 换行,第一行在下方

4.主轴对齐方式:

(1)justify-content:flex-start (默认值) 轴起点对齐

(2)justify-content:flex-end 轴终点对齐

(3)justify-content:center 居中

(4)justify-content:space-between 两端对齐,项目之间间隔相等

(5)jusify-content:space-around 每个元素两侧的间隔相等

5.交叉轴对齐方式:

(1)align-items:flex-start 轴起点对齐

(2)align-items:flex-end 轴终点对齐

(3)align-items:center 居中

(4)align-items:baseline 项目中第一行文字的基线对齐

6.align-content:

调整换行对齐方式

7.flex和flex-graw:

分配剩余空间或者设置子元素的比例

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

闽ICP备14008679号