容器属性:
1.flex-direction:项目的排列方向
(1)row 主轴方向排列
(2)row-reverse 主轴反方向排列
(3)column 纵向排列
(4)column-reverse 纵向反方向排列
2.flex-wrap:项目的换行方式
(1)nowrap:不换
(2)wrap:换行,第一行在上方
(3)wrap-reverse:换行,第一行在下方
3.flex-flow:是flex-direction和flex-wrap 的简写,默认 row nowrap
4.justify-content:项目在主轴上的对齐方式
(1)flex-start 左对齐
(2)flex-end 右对齐
(3)center 居中
(4)space-between 两端对齐,项目之间的间隔相等
(5)space-around 每个项目两侧的间距相等
5.align-items:项目在交叉轴上对齐方式
(1)flex-start 交叉轴的起点对齐
(2)flex-end 交叉轴的终点对齐
(3)center 交叉轴的中点对齐
(4)baseline 项目第一行文字的基线对齐
(5)stretch (默认值)如果项目未设置高度,或者为auto,将占满整个容器的高度。
项目属性:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .con{ 8 width: 500px; 9 height: 300px; 10 outline: 1px solid black; 11 display: flex; 12 } 13 .con div{ 14 width: 50px; 15 height: 50px; 16 outline: 1px solid black; 17 } 18 .one{background: red;} .two{background: orange} .three{background: yellow} .four{background: green} .five{background: blueviolet} 19 20 /*容器属性 */ 21 .con{ 22 /*flex-direction: row;row-reverse;column;column-reverse*/ 23 /*flex-wrap:wrap-reverse;wrap;nowrap*/ 24 /*justify-content:space-between;flex-start;flex-end;center;spance-around*/ 25 /*align-items: flex-end;flex-start;center;baseline;stretch;*/ 26 } 27 /*项目属性*/ 28 .one{ 29 /*order: 1; 数越小越往前排列*/ 30 /*flex-grow: 2; 默认为0,将剩余空间分给不为0的元素*/ 31 /*flex-shrink:2; 默认为1,当父级空间不足,都将按比例减小,如果一个元素为0,其余为1,则这个元素不减小*/ 32 /*align-self: flex-end; 可以覆盖父级的align-items属性,默认为auto,表示继承父级的align-items属性,如没有父元素则表现stretch*/ 33 } 34 35 </style> 36 </head> 37 <body> 38 <div class="con"> 39 <div class="one">1</div> 40 <div class="two">2</div> 41 <div class="three">3</div> 42 <div class="four">4</div> 43 <div class="five">5</div> 44 </div> 45 46 </body> 47 </html>
1.order:项目的排列顺序。数值越小,排列越靠前,默认为0
2.flex-grow:属性定义项目的放大比例,默认为0,即:如果存在剩余空间,也不放大
3.flex-shrink 属性定义了项目缩小比例,默认为1,即如果空间不足,该项目将缩小。
4.flex 是flex-grow,flex-shrink flex-basis简写
5.align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父类的align-items属性,如果没有父级,等同于stretch。