CSS弹性盒子布局之Flex

580 阅读2分钟

文章类型:草稿箱文章整理。

前言:flex布局永远滴神!

1.CSS盒子弹性布局

🤤弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。——MDN CSS 弹性盒子布局

但是 flexbox 本质上是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列,以上说的通过嵌套处理两个维度上的布局本质上还是处理了两个一维的布局。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。——MDN flex 布局的基本概念

2.flex布局

😎😎😎😎😎

2.1 flex布局属性

属性描述默认值作用对象
flex-direction定义了flex容器的主轴的方向(正方向或反方向)row,row-reverse,column,column-reverserowflex容器
flex-wrap项目太大而无法全部显示在一行中,可以通过设置flex-wrap进行换行显示nowrap,wrap,wrap-reverse,nowrapflex容器
flex-flowflex-direction 和 flex-wrap 组合简写属性 flex-flow上面两个属性值进行组合row nowrapflex容器
align-items控制交叉轴上子项的对齐方式stretch,flex-start,center,flex-end,baselinestretchflex容器
justify-content分配主轴上子项之间的空间 flex-start,center,flex-end,space-between,space-around上面两个属性值进行组合row nowrapflex容器
align-content分配交叉轴上行空间,类似于交叉轴上的justify-content上面两个属性值进行组合row nowrapflex容器
flex-grow为整数时,以 flex-basis 为基础,沿主轴方向增长尺寸number0flex子项上
flex-shrink处理flex子项收缩的问题number1flex子项上
flex-basis定义flex子项的空间大小auto,numberautoflex子项上
flexflex-grow,flex-shrink,flex-basis组合简写属性单元格单元格flex子项上
orderflex-grow,flex-shrink,flex-basis组合简写属性单元格单元格flex子项上
align-selfflex-grow,flex-shrink,flex-basis组合简写属性单元格单元格flex子项上

参考文档: