当前位置：首页 > Web前端 > CSS

再次总结一下flex布局，简单明了，一看就懂，，_0

时间：2023-03-31 11:02:28 CSS

思维导图flex布局类型[]display:flex;（本文主要为此目的）[]展示；内联柔性；attribute[]父节点容器flex-container[]子节点flex-item父节点容器flex-direction主轴方向（一般为水平方向）flex-warp处理排行不足的问题flex-flow1和2的简写（flex-flow:rownowrap)justify-content主轴对齐（水平方向）align-items横轴（垂直方向）与主轴对齐align-content横轴上多条线对齐一个子节点itemorder值为一个整数，默认0，整数越大小，item排列的FLEX-GROW越多，其他ITEM放大倍数Flex-SHRINK的放大倍数，但空间不足。根据比例，需要在父节点container中设置Flex-Basis的宽度-growflex-shrinkflex-basisalign-self的总和允许item本身在横轴（垂直方向）上有一个对齐方式父节点容器flex-direction主轴方向（一般为水平方向）flex-warp解决一行对齐不够的问题flex-flow1和2的简写（flex-flow:rownowrap）justify-content主轴（水平方向）)alignmentalign-items横轴与主轴对齐（垂直方向）align-content横轴上多行轴上对齐html示例代码：1

2

3

4

csscasecode:html,body{background:#f7f7f7;}.flex-container{显示：弹性颜色：#fff；}.flex-item{宽度：150px；高度：100px；}.red{背景：红色；}.green{背景：绿色；}.yellow{背景：黄色；}.black{背景：黑色；}页面如下：flex-direction决定了主轴（通常是x轴）的方向，即item排列的方向。有四个可能的值：行（默认）|行反转|栏目|column-reverserow：主轴是水平的，项目沿主轴从左到右排列column：主轴是垂直的，项目沿主轴从上到下排列row-reverse：theReversecolumn-reversewithrow:主轴是垂直的，项目从下到上排列，与column.flex-container{display:flex;高度：100px；弹性方向：行；/*1*/flex-direction:column;/*2*/flex-direction:row-reverse;/*3*/flex-direction:column-reverse;/*4*/color:#fff;}.flex-item{flex:1}flex-wrap默认情况下，项目排列在一行上，即主轴。flex-wrap决定是否环绕，排列不够时如何环绕。可能的值为nowrap（默认）|包装|wrap-reversnowrap：自动收缩项目，无行wrapwrap：wrap，第一行在上面wrap-reverse：wrap，第一行在下面。弹性容器{显示：弹性；颜色：#fff；弹性包装：nowrap；/*1*/flex-wrap:wrap;/*2*/flex-wrap:wrap-reverse;/*3*/}.flex-item{宽度：150px；高度：100px;}.red{宽度：300px;}备注：flex-item的宽度定义分别为300px150px150px150px；所以按照2:1:1:1的比例划分父节点的宽度，实际宽度为150px75px75px75px（共375px）flex-flow是flex-direction和flex-wrap的简写形式，比如如：行换行|columnwrap-reverse等。默认值为rownowrap，即水平排列不换行。.flex-container{flex-flow:rownowrap;}组合：flex-flownowrapwrapwrap-reverserow1,rownowrap5,rowwrap9,rowwrap-reversecolumn2,columnnowrap6,columnwrap10,columnwrap-reverserow-reverse3,row-reversenowrap7,row-reversewrap11,row-reversewrap-reversecolumn-reverse4,column-reversenowrap8,column-reversewrap12,column-reversewrap-reverse第一种：当flex-wrap设置为nowrap时，属性(widthratio,non-px实际宽度）按照flex-direction排列。第二种：当flex-wrap设置为wrap时，item按照实际宽度排列。按照实际宽度排列，如果不够，很重要的是去上游justify-content，它决定了item在主轴上的对齐方式。可能的值有flex-start（默认）、flex-end、center、space-between、space-around。当主轴为水平方向时，具体含义为flex-start：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐space-around：沿轴均匀分布-container，flex-start、flex-end不起作用。flex-container{调整内容：flex-start;/*1*/调整内容：flex-end；/*2*/证明内容：居中；/*3*/justify-content:space-between;/*4*/justify-content:space-around;/*5*/}.flex-item{宽度：50px；height:50px;}align-items决定item在横轴（Y轴）上的对齐方式，可能的值有flex-start|弹性端|中心|基线|stretch当主轴为水平（Y轴）时，其具体含义为：flex-start:顶部对齐flex-end:底部对齐center:垂直居中对齐baseline:item首行文本底部对齐stretch:当不设置item的高度时，item会和容器等高对齐备注：父节点flex-container只有和子节点flex-item存在高度差时才能发挥作用。弹性容器{高度：200px；对齐项目：弹性启动；/*1*/对齐项目：flex-end；/*2*/align-items:center;/*3*/对齐项：基线；/*4*/对齐项目：拉伸；/*5*/}.flex-item{height:100px;}.red,.green{font-size:14px;}align-content该属性定义了何时有多个主轴，即不止一个物品当有一行时，多行在交叉轴上的对齐方式注意当有多行时，定义align-content后，align-items属性会失效。align-content的可能取值有以下含义（假设主轴水平）：flex-start：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐space-around：沿轴均匀分布stretch：每行会根据其flex-grow值进行拉伸，以完全占据剩余空间备注：1.设置flex-wrap：wrap，否则默认nowrap会按比例填充一行。2、只有父节点flex-container和子节点flex-item存在高度差时，才能发挥作用。弹性容器{弹性包装：包装；高度：300px；背景：#969799；对齐内容：flex-start；/*1*/对齐内容：flex-end；/*2*/对齐内容：居中；/*3*/align-content:space-between;/*4*/align-content:space-between;/*5*/align-content:stretch;/*6*/}在item的style中设置子节点item的属性。该项目具有以下六个属性。订单值是一个整数。默认为0，整数越小，item排列越高。flex-grow是其他项目的放大。在flex-basis中设置flex-basiswidth来指定项目的宽度。flex是flex-grow、flex-shrink和flex-basis的总和。align-self允许项目本身在横轴（垂直方向）上对齐。为0，整数越小，项目排列越高。flex-container{flex-flow:wrap;}.flex-items{order:1;}flex-grow定义当flex容器有多余空间时是否扩大项目。默认值为0，即有多余空间时不放大；可能值为整数，表示不同项目的放大比例。-item{flex-grow:1;}/*1*/.flex-contanier{flex-wrap:wrap;}/*2*/.flex-contanier{flex-wrap:nowrap;}flex-shrink定义当是否当容器空间不足时，物品会收缩。默认值为1，表示当空间不足时，item会自动缩小。它的可能值是一个整数，代表不同项目的减少比例。备注：这很令人困惑。分析一下，flex-basis表示item在主轴上所占的空间。默认值为自动。.red{flex-basis:100px;}.green{flex-basis:100px;}flexflex属性是flex-grow、flex-shrink和flex-basis三个属性的简写和。详见上面的三个align-selfalign-self属性允许item在横轴上有自己独特的对齐方式。它有六个可能的值。默认值为autoauto：与父元素的值保持一致align-selfflex-start：顶部对齐flex-end：底部对齐center：垂直方向居中对齐baseline：对齐第一行文本的底部itemstretch：当item的高度没有设置时，item会和容器的高度对齐备注：和父节点flex-container中的align-item和align-content一样，意思是区别就是align设置是单一的，align-items设置.green{align-self:auto;对齐自我：弹性启动；对齐自我：弹性结束；对齐自我：中心；对齐自我：基线；align-self:stretch;}备注:align-self:baseline;对齐自我：伸展；同12，这里就不介绍了，可以参考align-items的原文章链接

上一篇：CSS选择器及其优先级

下一篇：CSS如何完成一个GoogleInputStyle

再次总结一下flex布局，简单明了，一看就懂，，_0相关文章

最新推荐

猜你喜欢