1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 13 ul{ 14 width: 200px; 15 height: 500px; 16 border: 4px red solid; 17 18 margin: 0 auto; 19 20 /* 设置弹性容器 */ 21 display: flex; 22 23 /* 设置容器主轴和侧轴 */ 24 /* flex-direction: column; 25 flex-wrap: wrap; */ 26 27 flex-flow: row wrap; 28 29 /* 30 justify-content 设置元素在主轴上的对齐方式 31 flex-start 默认值 弹性项沿着主轴起边对齐 32 flex-end 弹性项沿着主轴终边对齐 33 center 弹性项沿着主轴居中对齐 34 space-around 空白空间平均分配到每一个元素的两侧 35 space-evenly 将空白空间分配到元素的一侧 36 space-between 将空白空间分配到两个元素之间 37 38 39 40 */ 41 justify-content: flex-start ; 42 43 44 /* align-items 45 - 设置侧轴上元素的对齐方式 46 - 可选值： 47 stretch ，默认值 辅轴上的元素将会被拉伸为相同的高度 48 flex-start 使元素沿着辅轴的起边对齐 49 flex-end 使元素沿着辅轴的终边对齐 50 center 使元素沿着辅轴的中间对齐 51 */ 52 align-items: flex-end; 53 54 /* 55 align-content: ; 56 - 用来设置侧轴上空白空间的分布 57 - 可选值： 58 space-around 59 space-between 60 space-evenly 61 */ 62 /* align-content: space-evenly; */ 63 } 64 65 ul li{ 66 width: 100px; 67 height: 150px; 68 font-size: 50px; 69 color: #fff; 70 71 /* 72 元素的缩减系数越大，本身大小越大，缩减的越多 73 */ 74 /* flex-shrink:1; */ 75 76 /* flex-grow: 10; */ 77 } 78 79 li:nth-child(1){ 80 background-color: orange; 81 82 font-size: 80px; 83 84 /* 85 align-self 弹性元素的属性 86 - 和 align-items作用一样，值也一样， 87 不同点在于self用于单独设置某个元素的对齐方式 88 */ 89 /* align-self: stretch; */ 90 91 } 92 93 li:nth-child(2){ 94 background-color: pink; 95 } 96 97 li:nth-child(3){ 98 background-color: #bfa; 99 } 100 101 li:nth-child(4){ 102 background-color: #00FFFF; 103 } 104 105 </style> 106 </head> 107 <body> 108 109 <ul> 110 <li>1</li> 111 <li>2</li> 112 <li>3</li> 113 <li>4</li> 114 </ul> 115 116 </body> 117 </html>
效果
内容；副轴终边对齐方式
1.父元素ul设置了flex,高度height: 500px;，也换行了，此时父元素的高度空间被分配为两行。
2.父元素ul设置，flex-flow: row wrap; align-items: flex-end;侧轴对齐方式为终边对齐，侧轴由上到下换行，此时对于，子项的起边和终边如图所示
内容；主轴终边对齐方式
1.父元素设置justify-content: flex-end ， 没有自动空间分配，子项元素是紧紧排列的。