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>效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
内容；副轴终边对齐方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
1.父元素ul设置了flex,高度height: 500px;，也换行了，此时父元素的高度空间被分配为两行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
2.父元素ul设置，flex-flow: row wrap; align-items: flex-end;侧轴对齐方式为终边对齐，侧轴由上到下换行，此时对于，子项的起边和终边如图所示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
内容；主轴终边对齐方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
1.父元素设置justify-content: flex-end ， 没有自动空间分配，子项元素是紧紧排列的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html
以上就是css 弹性盒子（flex布局）的起边和终边详解的全部内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20844.html