Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性盒模型（flexbox）布局初体验
Blogger Information
Blog 13
fans 2
comment 0
visits 10327
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
弹性盒模型（flexbox）布局初体验
北纬38
Original
684 people have browsed it

1.内容的多列多栏显示

  1.     <style>
  2.         /* 初始化 */
  3.     *{
  4.         padding: 0;
  5.         margin: 0;
  6.         box-sizing: border-box;
  7.     }
  8.     :root{
  9.         font-size: 20px;
  10.         color:blue;
  11.     }
  12.     div{
  13.         border: 1px solid black;
  14.         padding: 20px;
  15.         width: 50rem px;
  16.         margin: 30px auto;
  17.     }
  18.     /* 分列显示 */
  19.     div{
  20.         column-count: 3;
  21.         column-width: auto;
  22.         column-rule-style: solid;
  23.         column-rule-width: thin;
  24.         column-rule-color: black;
  25.     }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div>
  30.         由军事科学院军事医学研究院与地方企业共同研发形成的新型冠状病毒mRNA疫苗（ARCoV），19日正式通过国家药品监督管理局临床试验批准。这是国内首个获批开展临床试验的新冠mRNA疫苗。
  31. 新冠肺炎疫情暴发以来，军事科学院军事医学研究院紧前部署应急科研攻关，同时推进多条技术路线的新冠疫苗研发。国产新冠mRNA疫苗是该院继重组新冠疫苗（腺病毒载体）后，获批临床试验的又一高技术疫苗品种。
  32. 据项目负责人、该院研究员秦成峰介绍，mRNA疫苗是近年来新兴的一种疫苗形式，其基本原理是通过特定的递送系统将表达抗原靶标的mRNA导入体内，在体内表达出蛋白并刺激机体产生特异性免疫学反应，从而使机体获得免疫保护。
  33. (来源:新华社)
  34.     </div>
  36. </body>

例图：

2.弹性盒模型（flexible box/flexboxflexible box/flexbox）

用于实现容器项目里的对齐、方向、排序，即使在项目大小的位置、动态生成的情况最大特性在于能够动态修改子元素的宽度和高度，以满足在不同尺寸下屏幕的恰当布局。

  • 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
  • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

    4.容器属性及应用

  • flex-direction 设置主轴方向，确定弹性子元素排列方式
属性值 含义
row (默认值) 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。
row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
Column 主轴为垂直方向。排列顺序为从上到下。
column-reverse 主轴为垂直方向。排列顺序为从下到上。 
  1.          .container{flex-direction: row;

  1.  .container{flex-direction: row-reverse;}

  1. .container{flex-direction: column;}

  1. .container{flex-direction: column-reverse;}

  • flex-wrap 当弹性子元素超出弹性容器范围时是否换行
属性值 含义
nowrap (默认值 溢出时不换行
Wrap 溢出时自动换行
wrap-reverse 溢出时自动换行，翻转排列。 
  1. .container{flex-wrap: wrap;}

  1. .container{flex-wrap: wrap-reverse;}

  • flex flow flex- direction和flex- wrap属性的快捷方式，复合属性
    1. .container{flex-flow: row;}
  • justify-content 主轴上的对齐方式,项目之间
属性值 含义
flex-start (默认值) 主轴开始对齐，主轴为横轴，ltr环境下， 左对齐
flex-end 主轴结束对齐，主轴为横轴，ltr环境 下，右对齐
Center 居中对齐
space-between 第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
space-around 全部均匀分布 
  1. justify-content: flex-start;

  1. justify-content: flex-end;

  1. justify-content: center;

  1. justify-content:space-between;

  1. justify-content:space-around;

  1. justify-content:space-evenly;

  • align-items 侧轴_上的对齐方式
属性值 含义
flex-start 侧轴开始对齐，主轴为横轴，顶对齐
flex-end 侧轴结束对齐
Center 居中对齐
Baseline 基线对齐
stretch (默认值) 从侧轴开始到侧轴结束铺满整个侧轴 
  1.  align-items: stretch;

  1.  align-items: flex-start;

  1.  align-items: flex-end;

  1.  align-items: center;

  • align-content 侧轴上有空白时，侧轴的对齐方式
flex-start 主轴开始对齐，主轴为横轴，ltr环境下，左对齐
flex-end 主轴结束对齐，主轴为横轴，ltr环境下，右对齐
Center 居中对齐
space-between 第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
space- around 全部均匀分布
stretch (默认值) 各行伸展以占用剩余空间。如果剩余空间是负数，该值等效于flex-start 
  1. align-content: flex-start;

  1.  align-content: flex-end;

  1. align-content: center;

  1. align-content: space-between;

  1.  align-content: space-around;

  1. align-content: space-evenly;

3.弹性子元素属性

Order <integer> 控制弹性容器里子元素的顺序,数值小的排在前面，可以为负值。

  1.    <style>
  2.       .container {display: flex;}
  3.       .container > .item:first-of-type {order: 3;}
  4.     </style>
  5.   </head>
  6.   <body>
  7.     <div class="container">
  8.       <div class="item">1</div>
  9.       <div class="item">2</div>
  10.       <div class="item">3</div>
  11.     </div>
  12.   </body>

5.flex布局导航栏

  1.     <style>
  2.       /* 初始化 */
  3.       * {
  4.         padding: 0;
  5.         margin: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       a {
  9.         text-decoration: none;
  10.         color: silver;
  11.       }
  12.       nav {
  13.         height: 50px;
  14.         background-color: midnightblue;
  15.         padding: 0 60px;
  16.         /* 转为弹性盒布局 */
  17.         display: flex;
  18.       }
  19.       nav a {
  20.         height: inherit;
  21.         line-height: 50px;
  22.         padding: 0 20px;
  23.       }
  24.       nav a:hover {
  25.         background-color: coral;
  26.         color: white;
  27.       }
  28.       /* 登录/注册放在最右边 */
  29.       nav a:last-of-type {
  30.         margin-left: auto;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <header>
  36.       <nav>
  37.         <a href="">首页</a>
  38.         <a href="">视频课程</a>
  39.         <a href="">资料下载</a>
  40.         <a href="">课程介绍</a>
  41.         <a href="">论坛</a>
  42.         <a href="">登录/注册</a>
  43.       </nav>
  44.     </header>
  45.   </body>

6.总结

初次使用弹性盒模型觉得很神奇，相比之前利用浮动和定位实现布局，这种方法更加高效，兼容性也会很好。

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