目录 说明display属性flex-direction属性主轴与交叉轴justify-content属性align-items属性flex-wrap属性flex-flow属性align-content属性align-self属性order属性flex-grow属性flex-shrink属性flex-basis属性flex属性row-gap与column-gap属性gap属性其他示例 说明
后面的flex布局示例代码都会在此示例的flexTest样式上增加代码以做说明。
<!DOCTYPE html> <html> <head> <style> .box{ height:500px; width:700px; border: 1px solid gray; } .number{ width:40px; text-align: center; } .number1{ background-color: #009688; height:40px; } .number2{ background-color: #eb064a; height:50px; } .number3{ background-color: #9c27b0; height:60px; } .number4{ background-color: #ebea06; height:70px; } .number5{ background-color: #1cdd30; height:80px; } .flexTest{ height:500px; } </style> </head> <body> <div class="box"> <div class="flexTest"> <div class="number number1">1</div> <div class="number number2">2</div> <div class="number number3">3</div> <div class="number number4">4</div> <div class="number number5">5</div> </div> </div> </body> </html>效果如下：
display属性设置 display: flex; 表示启用flex布局，只有启用了flex布局后续的其他flex属性才会生效，启用flex布局后里面的元素默认水平排列。
代码：
.flexTest{ height:500px; display: flex; } flex-direction属性flex-direction属性可取以下值：row(默认) 、row-reverse、column、column-reverse
说明：
row 横向从左往右排列，即项目排列顺序为正序1-2-3-4-5。row为默认值，即当启用flex布局后即使不设置flex-direction，flex-direction会默认为row
row-reverse 同为横向排列，但从右往左排列，即顺序为倒序5-4-3-2-1
column 为纵向从上往下排列，项目排列顺序为正序1-2-3-4-5
column-reverse 同为纵向排列，，但从下往上排列，即项目顺序为倒序5-4-3-2-1
以row-reverse为例：
.flexTest{ height:500px; display: flex; flex-direction: row-reverse; } 主轴与交叉轴主轴和交叉轴的概念：
flex-direction设置为横向（row或row-reverse），则主轴为横向，交叉轴为纵向；
flex-direction设置为纵向（column或column-reverse），则主轴为纵向，交叉轴为横向；
（主轴和交叉轴，用于水平对齐和纵向两个对齐）
justify-content属性justify-content属性控制主轴上的对齐方式
justify-content属性可取以下值：flex-start(默认) 、flex-end 、 center、 space-between 、space-around 、space-evenly;
说明：
flex-start：各元素在主轴上从起始处排列对齐。
flex-end：各元素在主轴上从结束处排列对齐。
center：各元素在主轴上居中对齐
space-between：第一元素在主轴上起始，最后一个元素在主轴上结束位置，其余元素项目评分中间空间
space-around：与space-between相似。区别是space-around属性的第一个元素之前和最后一个元素之后会有空白间隙，间隙等于每对相邻元素之间空间的一半。
space-evenly：与space-around相似。区别是space-evenly属性的所有元素之间的间隙是相等的。
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around; } align-items属性align-items属性控制交叉轴上的对齐方式
align-items属性可取以下值：flex-start、 flex-end、center、baseline、stretch(默认)
说明：
flex-start、 flex-end、center是控制交叉轴上的对齐方式，对齐方式与上面justify-content里的同理。
baseline：元素以第一行文字的基线为参照进行排列。
stretch：align-items属性的默认值，如果元素未设置高度或设为auto，将占满整个容器的高度。（示例中每个数字所在的div都设置了高度，所以align-items设置为stretch不会占满）
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:center; } flex-wrap属性flex-wrap属性控制主轴上的元素满了后的换行（换列）方式
flex-wrap属性可取以下值：nowrap(默认) 、wrap 、 wrap-reverse
说明：
nowrap：默认值，主轴元素满了后不换行（不换列）
wrap：主轴元素满了后换行（换列）
wrap-reverse：主轴元素满了后换行（换列），换行后的行（列）在前
在原来的代码中，我们再增加14个数字5分别查看nowrap、wrap 、 wrap-reverse的效果。
nowrap：
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; flex-wrap:nowrap; }wrap ：
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; flex-wrap:wrap; }wrap-reverse：
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; flex-wrap:wrap-reverse; } flex-flow属性flex-flow属性是flex-direction和flex-wrap的合写形式，第一个值代表flex-direction，第二个值代表flex-wrap
.flexTest{ height:500px; display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-around ; }相当于
.flexTest{ height:500px; display: flex; flex-flow:row wrap; justify-content:space-around ; } align-content属性align-content属性控制交叉轴上的多行（多列）对齐方式。如果只有行（列），该属性不起作用。
align-content属性可取以下值：flex-start、 flex-end、 center、 space-between、 space-around、 stretch(默认);
.flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; flex-wrap:wrap; align-content:flex-start; } align-self属性align-self属性用于具体元素交叉轴上的对齐方式
align-self属性可取以下值：auto(默认)、flex-start、flex-end、 center、baseline、stretch
说明：
auto：表示继承父容器的align-items属性。如果没父元素，则默认stretch。
对数字5单独进行交叉轴上对齐：
.number5{ background-color: #1cdd30; height:80px; align-self:flex-end; } .flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; } order属性order属性定义在具体元素上，用于排列顺序。数值越小，排列越靠前，默认为0。
.number3{ background-color: #9c27b0; height:60px; order:4; } .number4{ background-color: #ebea06; height:70px; order:3; } .number5{ background-color: #1cdd30; height:80px; order:1; }因为数字1、2默认为order为0，数字3 order设为了4，数字4 order设为了3，数字3 order设为了1。因为order越小优先级越靠前，所以排列结果如下
flex-grow属性flex-grow属性定义元素的放大比例，默认为0（即如果存在剩余空间，也不放大），负数无效。
注意，即便设置了固定宽度，设置flex-grow大于0后，也会放大。
如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个元素的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他元素多一倍。
.number5{ background-color: #1cdd30; height:80px; flex-grow:1; } .flexTest{ height:500px; display: flex; flex-direction: row; justify-content:space-around ; align-items:flex-start; } flex-shrink属性flex-shrink 属性定义项目的收缩比例，默认为1。即如果主轴满了的话会收缩。当存在剩余空间，不会收缩。负值对该属性无效。 flex-shrink属性为0，表示该元素不收缩。 flex-shrink属性越大，元素收缩越多。
flex-basis属性flex-basis 属性定义项目的宽度，相当于width。默认为auto。
如果同时设置了width和flex-basis，flex-basis权重会比width属性高，因此会覆盖widtn属性。
.number5{ background-color: #1cdd30; height:80px; flex-basis:100px; } flex属性flex属性是用于flex-grow、flex-shrink、flex-basis属性的合并写法
例如：
.number5{ background-color: #1cdd30; height:80px; flex-grow:1; flex-shrink:1; flex-basis:auto; }相当于
.number5{ background-color: #1cdd30; height:80px; flex:1 1 auto; }该属性有两个快捷值：flex:auto;相当于(1 1 auto) 和 flex:none;相当于(0 0 auto)。 建议优先使用auto属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
row-gap与column-gap属性row-gap和column-gap属性用于设置横向与纵向各元素间的间隔空间
.flexTest{ height:500px; display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-around ; row-gap: 10px; column-gap: 20px; } gap属性gap属性是row-gap和column-gap的合写形式
.flexTest{ height:500px; display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-around ; row-gap: 10px; column-gap: 20px; }相当于
.flexTest{ height:500px; display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-around ; gap: 10px 20px; } 其他示例 .number4{ background-color: #ebea06; height:70px; margin-left:auto } .flexTest{ height:500px; display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-start ; }参考： Basic concepts of flexbox Aligning Items in a Flex Container Flex 布局教程：语法篇 A Complete Guide to Flexbox 一篇文章弄懂flex布局 Layout Demos
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
