关于flex布局
flex布局, 以及主轴侧轴
flex布局的目标是取代繁重复杂的浮动, 常见的用法就是在父项元素中设置子项的排列方式
在flex中, 将图片分为主轴和交叉轴. 在默认情况下, 主轴为从左到右(x轴, row), 侧轴/交叉轴为从上到下(y轴, column). 主轴和侧轴相互垂直, 可以颠倒.
部署方法: 将其声明为一个flex元素
1 | .flex-container { |
在一个flex container组件中, 元素按照主轴方向以某种规律进行排列. flex布局可以分成三个维度.
主轴方向上, 按照代码顺序排列, 按照布局需求换行
侧轴方向上, 按照flex布局需求, 选择居中还是别的什么
父项属性
flex-direction:
设置主轴以及方向
row;从左到右
row-reverse;从右到左(默认)
column;从上到下
column-reverse:从下到上
justify-content
设置元素在主轴方向上的排列,
center在主轴上居中,
flex-start默认按照主轴方向(默认)
flex-end按照主轴的反方向,
space-around在剩余空间上等距排列,
space-between在剩余空间上等距排列,
flex-wrap
设置内部元素的换行情况
nowarp:尽可能在一行上(默认)
wrap:超出限制自动换行,
wrap-reverse:自动换行, 但是排列顺序是反方向的
align-items
子项为单行的时候使用, 设置元素在侧轴方向的排列
stretch:拉伸填充 (默认)
flex-start:从交叉轴正方向对齐
flex-end:交叉轴反方向对齐
center:在交叉轴方向上居中
align-content
子项为多行使用, 设置元素在侧轴方向的排列
flex-start:交叉轴正向对齐(默认)
flex-end:交叉轴反向对齐
center:交叉轴中央对齐
space-around:平均分布在交叉轴上
space-between:和上面一样
子项属性
align-self:
和align-items一样, 为子元素单独使用flex布局, 可以覆盖父项元素的设置.
默认值为auto, 剩下的数值为align-items同样的数值
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xranudvilas@gmail.com
