|
|
@@ -0,0 +1,92 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box div{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: red;
|
|
|
+ margin:10px;
|
|
|
+ font-size: 50px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 200px;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ height: 700px;
|
|
|
+ background-color: blue;
|
|
|
+ /* display: flex; 把当前容器设置成弹性盒子（flex布局） */
|
|
|
+ /* 默认情况下会将内部所有元素在主轴上横向排列 （主轴方向默认横向） */
|
|
|
+ display: flex;
|
|
|
+ /* 调整主轴方向 row 横向 column 纵向 */
|
|
|
+ /* flex-direction: column; */
|
|
|
+ /* row-reverse 横向反转 column-reverse 纵向反转 */
|
|
|
+ /* flex-direction: row-reverse; */
|
|
|
+ /* flex-wrap: wrap 换行 */
|
|
|
+ /* flex布局默认情况 元素不换行 如果一行装不下会压缩元素 */
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+ /* justify-content 主轴对齐方式 flex-start flex-end center */
|
|
|
+ /* space-between 两端对齐 space-around 分散对齐 */
|
|
|
+ /* justify-content: space-around; */
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ /* justify-content: center; */
|
|
|
+ /* 交叉轴排列方式 flex-start flex-end center */
|
|
|
+ /* align-items: stretch; */
|
|
|
+
|
|
|
+ /* aligin-content 控制多行对齐 */
|
|
|
+ /* align-content: space-between; */
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 用于每一个子项上的属性 */
|
|
|
+
|
|
|
+ /* order 子项的排序 值越小越靠前 值越大越靠后*/
|
|
|
+ /* .box div:nth-child(3){
|
|
|
+ order: -1;
|
|
|
+ }
|
|
|
+ .box div:first-child{
|
|
|
+ order: 10;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* flex-grow 子项的放大比例 */
|
|
|
+ /* flex-grow 会把剩余空间进行分配 子项 flex-grow 比例分配 */
|
|
|
+ /* .box div:nth-child(4){
|
|
|
+ flex-grow: 2;
|
|
|
+ }
|
|
|
+ .box div:nth-child(3){
|
|
|
+ flex-grow: 1;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* flex-shrink 子项的缩小比例 */
|
|
|
+ /* flex-shrink 会把超出空间进行压缩 子项 flex-shrink 比例压缩 */
|
|
|
+
|
|
|
+ /* .box div:nth-child(3){
|
|
|
+ flex-shrink: 0;
|
|
|
+ } */
|
|
|
+
|
|
|
+ .box div{
|
|
|
+ /* flex:0 0 200px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .box div:nth-child(2){
|
|
|
+ align-self: flex-end;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+ <div>1</div>
|
|
|
+ <div>2</div>
|
|
|
+ <div>3</div>
|
|
|
+ <!-- <div>4</div>
|
|
|
+ <div>5</div>
|
|
|
+ <div>6</div>
|
|
|
+ <div>7</div>
|
|
|
+ <div>8</div> -->
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
