css 弹性盒子（flex布局）的起边和终边详解

2021-1-17

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>

效果