|
|
@@ -0,0 +1,105 @@
|
|
|
+<!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>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ /* 弹性布局 flex */
|
|
|
+ .box{
|
|
|
+ border:3px dashed black;
|
|
|
+ }
|
|
|
+ /* flex 布局 如果要控制多个元素实现弹性布局，需要给父元素使用display:flex; */
|
|
|
+ /* flex 默认排列方向为水平方向 */
|
|
|
+ .box ul{
|
|
|
+ width: 100%;
|
|
|
+ /* height: 500px; */
|
|
|
+ display: flex;
|
|
|
+ /* flex 布局分为主轴和交叉轴 主轴默认方向为水平方向 交叉轴默认方向为垂直方向 */
|
|
|
+ /* justify-content 可以实现flex元素 在主轴方向上的对齐方式 center 居中对齐 flex-start 左对齐 flex-end 右对齐 space-between 两端对齐 space-around 等间距对齐 */
|
|
|
+ /* justify-content: space-around; */
|
|
|
+
|
|
|
+ /* align-items 可以实现flex元素 在交叉轴方向上的对齐方式 center 居中对齐 flex-start 顶部对齐 flex-end 底部对齐 */
|
|
|
+ /* align-items: center; */
|
|
|
+
|
|
|
+ /* 修改主轴方向 flex-direction 可以实现flex元素 在主轴方向上的对齐方式 row 水平方向 column 垂直方向 */
|
|
|
+ /* flex-direction: column; */
|
|
|
+
|
|
|
+ /* 默认情况下 如果flex元素一行装不下，会压缩元素使其适应父元素宽度 */
|
|
|
+ /* 如果不希望压缩元素，可以使用flex-wrap: wrap; 来让元素换行 */
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+
|
|
|
+ /* align-content 可以实现多条轴的对齐方式 center 居中对齐 flex-start 顶部对齐 flex-end 底部对齐 space-between 两端对齐 space-around 等间距对齐 */
|
|
|
+ /* align-content: space-between; */
|
|
|
+
|
|
|
+ }
|
|
|
+ .box li{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: red;
|
|
|
+ margin: 10px;
|
|
|
+ color: white;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100px;
|
|
|
+ }
|
|
|
+ /* flex 对于单个元素的控制 */
|
|
|
+ /* 控制显示顺序 */
|
|
|
+ li:nth-child(3){
|
|
|
+ /* order 可以实现flex元素 在flex布局中的显示顺序 数值越大排列越靠后 */
|
|
|
+ /* order: -1; */
|
|
|
+
|
|
|
+ /* align-self 可以实现flex元素 在交叉轴方向上的对齐方式 flex-start 顶部对齐 flex-end 底部对齐 center 居中对齐 */
|
|
|
+ /* align-self: center; */
|
|
|
+
|
|
|
+ /* flex-shrink 可以实现flex元素 在主轴方向上的压缩比例 默认值为1 如果设置为0，元素不会压缩 */
|
|
|
+ /* flex-shrink: 0; */
|
|
|
+ }
|
|
|
+ .box2 li{
|
|
|
+ /* flex-grow 可以实现flex元素 在主轴方向上的扩展比例 默认值为0 如果设置为1，元素会扩展以适应父元素宽度 将空白区域等分给各个元素 */
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+ <ul>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ <li>4</li>
|
|
|
+ <li>5</li>
|
|
|
+ <li>6</li>
|
|
|
+ <li>7</li>
|
|
|
+ <li>8</li>
|
|
|
+ <li>9</li>
|
|
|
+ <li>10</li>
|
|
|
+ <li>11</li>
|
|
|
+ <li>12</li>
|
|
|
+ <li>13</li>
|
|
|
+ <li>14</li>
|
|
|
+ <li>15</li>
|
|
|
+ <!-- <li>16</li>
|
|
|
+ <li>17</li>
|
|
|
+ <li>18</li>
|
|
|
+ <li>19</li>
|
|
|
+ <li>20</li> -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="box box2">
|
|
|
+ <ul>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
