search

博客列表 >flex学习一

flex学习一

小追
小追原创
2020年06月27日 14:18:32612浏览

flex弹性盒子学习一

话不多说，上代码：

1.flex单行容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flexbox弹性盒布局快速预览</title>
  7.     <style>
  8.         .container{
  9.             width:800px;
  10.             /* 转为flexbox弹性盒子 */
  11.             /* 如果这个容器中的内容要使用弹性盒子布局，首先需要将这个容器转化为flex弹性盒子 */
  12.             display:flex;
  13.         }
  14.         /* 只在一行显示flex：auto可以自动平均弹性项目大小 */
  15.         .container>.item{
  16.             /* 一但将父元素转换为弹性容器，容器内的子元素（子元素的子元素不行）就会自动成为弹性项目 */
  17.             /* 不管这个项目标签之前是什么类型，统统转为行内块 */
  18.             /* 行内块是一行内显示可以设置宽高 */
  19.             flex:auto; 
  20.             /* width:60px;
  21.             height:66px; */
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <!-- 快速实现.container>.item{$}*3 -->
  27.     <div class="container">
  28.         <div class="item">1</div>
  29.         <div class="item">2</div>
  30.         <div class="item">3</div>
  31.         <div class="item">4</div>
  32.         <div class="item">5</div>
  33.         <div class="item">6</div>
  34.     </div>
  35. </body>
  36. </html>

2.flex多行容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flexbox弹性盒多行容器</title>
  7.     <style>
  8.         .container{
  9.             width: 600px;
  10.             display:flex;
  11.         }
  12.         /* 多行的时候要计算弹性容器的宽度和弹性项目的宽度，留下剩余空间不好看 */
  13.         .container>.item{
  14.             flex:auto; 
  15.             width:150px;
  16.         }
  17.         .container{
  18.             flex-wrap:wrap;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <!-- 快速实现.container>.item{$}*3 -->
  24.     <div class="container">
  25.         <div class="item">1</div>
  26.         <div class="item">2</div>
  27.         <div class="item">3</div>
  28.         <div class="item">4</div>
  29.         <div class="item">5</div>
  30.         <div class="item">6</div>
  31.     </div>
  32. </body>
  33. </html>

3.flex单行容器项目对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>单行容器的项目对齐</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  12.             /* justify-content:设置容器中的剩余空间在所有项目之间的分配方案 */
  14.             /* 1.容器剩余空间在所有项目两边如何分配，将所有项目视为一个整体 */
  15.             /* 开头对齐 */
  16.             justify-content:flex-start;
  17.             /* 不建议向下面两种方式写 */
  18.             /* justify-content:start; */
  19.             /* justify-content:left; */
  20.             /* 末尾对齐 */
  21.             justify-content:flex-end;
  22.             /* 中间对齐 */
  23.             justify-content:center;
  25.             /* 2.容器剩余空间在所有项目之间如何分配，将所有项目视为一个个的个体 */
  26.             /* 两端对齐 */
  27.             justify-content:space-between;
  28.             /* 分散对齐   剩余空间在所有项目的两侧对齐*/
  29.             justify-content:space-around;
  30.             /* 平均分配 */
  31.             justify-content:space-evenly;
  32.         }
  33.         .item{
  34.             width:60px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.     </div>
  44. </body>
  45. </html>

4.flex多行容器项目水平对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行容器的项目对齐主轴为水平时</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             flex-wrap:wrap;
  12.             /* 多行容器要给一下高度 */
  13.             height:150px;
  14.             /* align-content:设置多行容器中项目的排列方式 */
  15.             /* stretch默认值 */
  16.             align-content:stretch;
  17.                         /* 1.容器剩余空间在所有项目两边如何分配，将所有项目视为一个整体 */
  18.             /* 开头对齐 */
  19.             align-content:flex-start;
  20.             /* 末尾对齐 */
  21.             align-content:flex-end;
  22.             /* 中间对齐 */
  23.             align-content:center;
  25.             /* 2.容器剩余空间在所有项目之间如何分配，将所有项目视为一个个的个体 */
  26.             /* 两端对齐 */
  27.             align-content:space-between;
  28.             /* 分散对齐   剩余空间在所有项目的两侧对齐*/
  29.             align-content:space-around;
  30.             /* 平均分配 */
  31.             align-content:space-evenly;
  32.         }
  33.         .item{
  34.             width:60px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.         <div class="item">4</div>
  44.         <div class="item">5</div>
  45.         <div class="item">6</div>
  46.         <div class="item">7</div>
  47.         <div class="item">8</div>
  48.     </div>
  49. </body>
  50. </html>

5.flex多行容器垂直对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行容器的项目对齐主轴为垂直时</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             height:150px;
  11.             display:flex;
  12.             flex-direction:row;
  13.             flex-direction:column;
  15.             /* 项目两边分配 */
  16.             justify-content:flex-start;
  17.             justify-content:flex-end;
  18.             justify-content:center;
  20.             /* 项目之间对齐 */
  21.             justify-content:space-between;
  22.             justify-content:space-around;
  23.             justify-content:space-evenly;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="container">
  29.         <div class="item">1</div>
  30.         <div class="item">2</div>
  31.         <div class="item">3</div>
  32.     </div>
  33. </body>
  34. </html>

6.flex项目在交叉轴排列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目在交叉轴排列</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             height:200px;
  13.             /* 默认项目时在交叉轴自动拉伸的 */
  14.             align-items:stretch;
  16.             align-items:flex-start;
  17.             align-items:flex-end;
  18.             align-items:center;
  19.         }
  20.         .item{
  21.             width:60px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <div class="item">1</div>
  28.         <div class="item">2</div>
  29.         <div class="item">3</div>
  30.     </div>
  31. </body>
  32. </html>

7.flex主轴方向与项目排列的简写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>主轴方向与项目排列的简写</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             height:50px;
  12.             /* 默认值就不用写出来了
  13.             flex-direction:row;
  14.             flex-wrap:nowrap;
  15.             这一行代码代替上面两行
  16.             flex-flow:row nowrap; */
  17.             flex-flow:column wrap;
  18.         }
  19.         .item{
  20.             width:60px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">1</div>
  27.         <div class="item">2</div>
  28.         <div class="item">3</div>
  29.         <div class="item">4</div>
  30.         <div class="item">5</div>
  31.     </div>
  32. </body>
  33. </html>

8.用felx快速写一个主导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex弹性容器快速撸一个主导航</title>
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         a{
  14.             text-decoration:none;
  15.             color:#ccc;
  16.         }
  17.         nav{
  18.             height:40px;
  19.             background-color:#333;
  20.             padding:0 50px;
  21.             display:flex;
  22.         }
  23.         nav a{
  24.             height:inherit;
  25.             line-height:40px;
  26.             padding:0 15px;
  27.         }
  28.         nav a:hover{
  29.             background-color:lightslategray;
  30.             color:white;
  31.         }
  32.         nav a:last-of-type{
  33.             margin-left:auto;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <header>
  39.         <nav>
  40.             <a href="">首页</a>
  41.             <a href="">教学视频</a>
  42.             <a href="">社区问答</a>
  43.             <a href="">资源下载</a>
  44.             <a href>登录/注册</a>
  45.         </nav>
  46.     </header>
  47. </body>
  48. </html>

效果展示：

9.flex项目属性order控制项目顺序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目属性-order控制项目顺序</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.         }
  12.         .container>.item{
  13.             width:60px;
  14.         }
  15.         .container>.item:first-of-type{
  16.             /* order默认值是0 */
  17.             order:3;
  18.         }
  19.         .container>.item:last-of-type{
  20.             order:5;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">1</div>
  27.         <div class="item">2</div>
  28.         <div class="item">3</div>
  29.     </div>
  30. </body>
  31. </html>

10.order实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>order小案列，用户调整元素顺序</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             flex-direction:column;
  12.         }
  13.         .container>.item{
  14.             border:1px solid #000;
  15.             padding:10px;
  16.             display:flex;
  17.             position:relative;
  18.         }
  19.         .container>.item>div{
  20.             display:flex;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">imag-1<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  27.         <div class="item">imag-2<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  28.         <div class="item">imag-3<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  29.     </div>
  30. </body>
  31. <script>
  32.     let  up=(ele)=>(ele.offsetParent.style.order-=1);
  33.     let down=(ele)=>(ele.offsetParent.style.order+=1);
  34. </script>
  35. </html>

效果展示：

上一条：flex布局和对齐方式下一条：前端实例：用户注册
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多