flex弹性盒模型布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ border: 2px solid darkblue; /*将外层容器转换成弹性盒模型*/ display: flex; } ul li{ width: 200px; height: 100px; border: 1px solid darkgreen; background: darkgreen; margin: 10px; list-style: none; text-align: center; line-height: 100px; color: white; font-size: 30px; } </style> </head> <body> <!--弹性盒模型容器中的项目默认在主轴上排列 子元素默认都排列在主轴上，不换行 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效--> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>5</li> </ul> </body> </html> 主轴方向
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ margin: 0 auto; width: 1100px; height: 300px; border: 2px solid darkblue; /*将外层容器转换成弹性盒模型*/ display: flex; flex-direction: row; } ul li{ width: 200px; height: 100px; border: 1px solid darkgreen; background: darkgreen; margin: 10px; list-style: none; text-align: center; line-height: 100px; color: white; font-size: 30px; } </style> </head> <body> <!--弹性盒模型容器中的项目默认在主轴上排列 子元素默认都排列在主轴上，不换行 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效--> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>5</li> </ul> </body> </html> 主轴上的排列方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ margin: 0 auto; width: 1100px; height: 300px; border: 2px solid darkblue; /*将外层容器转换成弹性盒模型*/ display: flex; /*flex-direction: row;*/ /*justify-content: space-around; 均分*/ justify-content: space-between; /* 挨着左右两端均分*/ } ul li{ width: 150px; height: 100px; border: 1px solid darkgreen; background: darkgreen; /*margin: 10px;*/ border: 2px solid palevioletred; list-style: none; text-align: center; line-height: 100px; color: white; font-size: 30px; } </style> </head> <body> <!--弹性盒模型容器中的项目默认在主轴上排列 子元素默认都排列在主轴上，不换行 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效--> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>5</li> </ul> </body> </html> 交叉轴上的对齐方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ margin: 0 auto; width: 1100px; height: 300px; border: 2px solid darkblue; /*将外层容器转换成弹性盒模型*/ display: flex; /*flex-direction: row;*/ /*justify-content: space-around; 均分*/ justify-content: space-between; /* 挨着左右两端均分*/ align-items: center; flex-wrap: wrap; /*换行*/ } ul li{ width: 200px; height: 100px; border: 1px solid darkgreen; background: darkgreen; /*margin: 10px;*/ border: 2px solid palevioletred; list-style: none; text-align: center; line-height: 100px; color: white; font-size: 30px; } </style> </head> <body> <!--弹性盒模型容器中的项目默认在主轴上排列 子元素默认都排列在主轴上，不换行 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效--> <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> </ul> </body> </html> 多根轴线的对齐方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ margin: 0 auto; width: 1100px; height: 300px; border: 2px solid darkblue; /*将外层容器转换成弹性盒模型*/ display: flex; /*flex-direction: row;*/ /*justify-content: space-around; 均分*/ justify-content: space-between; /* 挨着左右两端均分*/ align-items: center; /*居中对齐弹性盒*/ flex-wrap: wrap; /*换行*/ align-content: space-around; /*多根轴线中间平分*/ } ul li{ width: 200px; height: 100px; border: 1px solid darkgreen; background: darkgreen; /*margin: 10px;*/ border: 2px solid palevioletred; list-style: none; text-align: center; line-height: 100px; color: white; font-size: 30px; } </style> </head> <body> <!--弹性盒模型容器中的项目默认在主轴上排列 子元素默认都排列在主轴上，不换行 如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度 如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效--> <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> </ul> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知