Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex学习一
Blogger Information
Blog 13
fans 0
comment 0
visits 13149
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex学习一
小追
Original
613 people have browsed it

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>

效果展示：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：一旦习惯了flex, 传统的float+position都不想碰了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post