让你秒懂Flex布局-CSS基本概念

时间：2023-03-30 18:38:57 CSS

采用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。容器的属性flex-direction\flex-wrap\flex-flow\justify-content\align-items\align-contentflex-direction属性决定了主轴的方向（即item所在的方向）排列）弹性方向：行|行反转|栏目|列反转；默认display:flex属性方向从左到右项目1

项目2

项目3

项目4

项目5项目6弹性方向：行；.box{显示：flex;弹性方向：行；background:#FFFFCC;高度：100vh；}弹性方向：行反转；.box{显示：flex;弹性方向：行反转；background:#FFFFCC;高度：100vh；}弹性方向：列；.box{显示：flex;弹性方向：列；background:#FFFFCC;高度：100vh；}flex-direction:column-reverse;.box{显示：flex;弹性方向：列反转；背景：#FFFFCC;高度：100vh；}flex-wrap属性默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴无法容纳时如何换行。弹性包装：nowrap|包装|wrap-reverse;flex-wrap:nowrap;.box{显示：flex;弹性方向：行；弹性包装：nowrap；背景：#FFFFCC;高度：100vh；}弹性换行：换行；.box{显示：flex;弹性方向：行；弹性包装：包装；背景：#FFFFCC;高度：100vh；}flex-wrap:wrap-reverse;.box{显示：flex;弹性方向：行；flex-wrap：wrap-reverse；background:#FFFFCC;高度：100vh；}flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。弹性流：<弹性方向>||<弹性包装>;.box{显示：flex;弹性流：行换行反转；背景：#FFFFCC；高度：100vh；}justify-content属性justify-content属性定义项目在主轴上的对齐方式。证明内容：flex-start|弹性端|中心|间隔|空间周围；调整内容：弹性开始；.box{显示：flex;弹性方向：行；证明内容：flex-start；background:#FFFFCC;高度：100vh；}证明内容：弹性结束；.box{显示：flex;弹性方向：行；证明内容：flex-end；background:#FFFFCC;高度：100vh；}证明内容：居中；.box{显示：flex;弹性方向：行；证明内容：居中；background:#FFFFCC;高度：100vh；}证明内容：空格之间；.box{显示：flex;弹性方向：行；证明内容：空格之间；background:#FFFFCC;高度：100vh；}证明内容：空间周围；.box{显示：flex;弹性方向：行；证明内容：空间周围；背景：#FFFFCC;高度：100vh；}align-items属性align-items属性定义项目如何在交叉轴上对齐。对齐项目：flex-start|弹性端|中心|基线|拉紧;flex-start：横轴起点对齐。\flex-end：对齐横轴的末端。\center：与横轴的中点对齐。\baseline：项目中第一行文本的基线对齐方式。\stretch（默认）：如果项目没有设置高度或设置为自动，它将填充容器的整个高度。对齐项目：flex-start项目1项目2项目3项目4项目5项目6align-items:flex-end.box{display:flex;背景：#FFFFCC；高度：100vh；证明内容：空格之间；对齐项目：flex-end；}align-items:center.box{display:flex;背景：#FFFFCC；高度：100vh；证明内容：空格之间；对齐项目：居中；}align-items:stretch.box{显示：flex;背景：#FFFFCC；/*高度：100vh；*/证明内容：空格之间；对齐项目：拉伸；}.item1{背景：#FF6666;/*高度：20vh；*/}.item2{背景：#33CC99;高度：40vh；}.item3{背景：#0099CC;/*高度：30vh；*/}.item4{背景：#FFCC33;/*高度：50vh；*/}.item5{背景：#336699；/*高度：30vh；*/}.item6{背景：#FF0033；/*高度：40vh；*/}align-content属性align-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉紧;flex-start：对齐横轴的起点。\flex-end：对齐到横轴的末端。\center：与横轴的中点对齐。\space-between：与横轴两端对齐，轴之间的间隔均匀分布。\space-around：每个轴两侧的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。\stretch（默认）：轴填充整个交叉轴。项目的属性order\flex-grow\flex-shrink\flex-basis\flex\align-selforder属性order属性定义了项目的排序顺序。值越小，排名越高，默认为0。命令：<整数>；.item1{背景：#FF6666;顺序：3；}.item2{背景：#33CC99;顺序：2；}.item3{背景：#0099CC;顺序：-2；}.item4{背景：#FFCC33;顺序：4；}.item5{背景：#336699；顺序：1；}.item6{背景：#FF0033；顺序：6；}flex-grow属性flex-grow属性定义item的放大比例，默认为0，即如果还有剩余空间，则不放大。弹性增长：<数字>；/默认0/.item1{背景：#FF6666;弹性增长：1；}.item2{背景：#33CC99;弹性增长：2；}.item3{背景：#0099CC;弹性增长：1；}flex-shrink属性flex-shrink属性定义了item的缩小比例，默认为1，即空间不足时，item会收缩。弹性收缩：<数字>；/default1/如果所有item的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。\负值对此属性无效。flex-basis属性flex-basis属性定义项目在分配多余空间之前占据的主轴空间（主要尺寸）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。弹性基础：<长度>|汽车;/defaultauto/可以设置为与width或height属性相同的值（比如350px），则item会占据固定的空间。flex属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。弹性：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]该属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。align-self属性align-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。对齐自我：自动|弹性启动|弹性端|中心|基线|拉紧;这个属性可能取6个值，除了auto，其他的和align-items属性完全一样。对齐自我：弹性结束；.box{显示：flex;弹性方向：列；背景：#FFFFCC；对齐内容：空格之间；}.item1{背景：#FF6666；宽度：30vh；}.item2{背景：#33CC99;宽度：40vh；对齐自我：弹性结束；}.item3{背景：#0099CC;宽度：60vh；}.item4{背景：#FFCC33；宽度：50vh；}.item5{背景：#336699；宽度：20vh；}.item6{背景：#FF0033；宽度：60vh；}(完)安利一个动画教程：https://www.bilibili.com/vide...\参考：http://www.ruanyifeng.com/blo...

上一篇：网页图片性能优化系列一：背景与基础

下一篇：Flask三：查看高级

让你秒懂Flex布局-CSS基本概念相关文章