CSS-弹性盒模型布局

最新推荐文章于 2023-06-16 14:25:52 发布

z_Ever1

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量293

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_ever1/article/details/78353545

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>弹性盒模型布局</title>
   <style>
       *{
           margin: 0;
           padding: 0;       }
       .outer{
           border: 1px solid black;
           display: flex;
           /*设置换行*/
           flex-wrap: wrap;
           /*反向换行*/
           /*flex-wrap: wrap-reverse;*/
           /*设置方向*/
           /*flex-direction: row;*/
           /*flex-direction: row-reverse;*/
           /*flex-direction: column;*/
           /*flex-direction: column-reverse;*/
           /*设置垂直对齐方式*/
           /*align-items: stretch;*/
           /*align-items: flex-start;*/
           /*align-items: flex-end;*/
           align-items: center;
       }
       .inner{
           flex: 1;
       }
       .one{
           background-color: red;
       }
       .two{
           background-color: green;
           flex: 1;
       }
       .three{
           background-color: blue;
       }
       ul{
           list-style:none;
           overflow: hidden;
           display: flex;
           /*水平对齐方式*/
           /*justify-content: flex-start;*/
           /*justify-content: flex-end;*/
           /*justify-content: center;*/
           /*justify-content: space-between;*/
           justify-content: space-around;
           background-color: skyblue;
       }
       ul li{
           /*display: inline-block;*/
           /*float: left;*/
           background-color: pink;
           width: 100px;
           text-align: center;
           line-height: 40px;
       }
   </style>
</head>
<body>
   <div class="outer">
       <div class="inner one">
           helloworld helloworld helloworld
       </div>
       <div class="inner two">
           helloworld helloworld helloworld
           helloworld helloworld helloworld
       </div>
       <div class="inner three">
           helloworld helloworld helloworld
           helloworld helloworld helloworld
           helloworld helloworld helloworld
       </div>
       <div class="inner one">
           helloworld helloworld helloworld
       </div>
       <div class="inner two">
           helloworld helloworld helloworld
           helloworld helloworld helloworld
       </div>
       <div class="inner three">
           helloworld helloworld helloworld
           helloworld helloworld helloworld
           helloworld helloworld helloworld
       </div>
   </div>
   <br>
   <br>
   <br>
   <br>
   <ul class="outer2">
       <li>首页</li>
       <li>学生信息页</li>
       <li>教师信息页</li>
       <li>院系信息页</li>
   </ul>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
</body>
</html>