1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .box1 { display: flex; /* 开启flex布局 flex-container 主轴 main axis 交叉轴 cross axis */ /* flex-direction: column-reverse; */ /* flex-direction 决定主轴的方向 默认值row 从左到右 row-reverse 从右到左 column 列 从上往下 column-reverse 列 从下往上 */
/* justify-content:space-around; */ /* justify-content 决定flex items 在主轴对齐方式 默认对齐方式 flex-start 与main start 对齐 flex-end 与main end 对齐 center 居中对齐 space-between flex items 之间等距离 与main start main end 两端对齐 space-evenly flex items 之间等距离 flex items main start main end 等距离 space-around flex items 之间等距离 flex items main start main end 距离是flex items 之间距离一半 */
/* align-items: baseline; */ /* justify-content 决定flex items 在交叉轴对齐方式 默认值 normal 弹性布局与stretch 一样 stretch flex items 在cross axis 方向的 size 为auto时 自动拉伸填充flex container flex-start 与cross start 对齐 flex-end 与cross end 对齐 center 居中对齐 baseline 基线对齐 */
/* flex-wrap: wrap-reverse; */ /* 默认所有flex items 都会在一行显示 flex-wrap 决定flex container 是单行还是多行 默认值nowrap 单行 wrap 多行 wrap-reverse 多行 对比wrap cross sart与cross end 相反 */
/* flex-flow: row wrap; */ /* flex-flow 缩写属性 -> flex-direction flex-wrap */
/* align-content: space-evenly; */ /* align-content 决定多行 flex items 在交叉轴 对齐方式 默认值 stretch 拉伸 flex-start flex-end center 居中对齐 space-between flex items 之间等距离 cross start cross end 两端对齐 space-evenly flex items 之间等距离 flex items cross start cross end 等距离 space-around flex items 之间等距离 flex items cross start cross end 距离是flex items 之间距离一半 */
/* 总结: flex-container display flex/inline-flex 开启flex布局 flex-driection 决定主轴的方向 justify-content 决定主轴上flex-items对齐方式 align-items 决定在交叉轴flex-items对齐方式 flex-wrap 是否换行显示 flex-flow flex-driection flex-wrap 缩写 */
/* flex-items order 决定flex items 排布顺序 越小排在前面 */
width: 500px; height: 400px; margin: 0 auto; background-color: #ff00ff; } .item { width: 100px; height: 100px; color:#fff; text-align: center; line-height: 100px; } .item1 { background-color:red; /* height: 60px; */ } .item2 { background-color:green; /* height: 120px; */ } .item3 { background-color:blue; /* height: 150px; */ }
</style> <title>Flex布局</title> </head> <body> <div class="box1"> <div class="item item1">item1</div> <div class="item item2">item2</div> <div class="item item3">item3</div> </div> <strong>测试元素</strong> </body> </html>
|