Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初识flex（常用属性的介绍）PS：附三种实现水平和垂直居中的方式
Blogger Information
Blog 40
fans 0
comment 1
visits 34617
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（常用属性的介绍）PS：附三种实现水平和垂直居中的方式
景云
Original
1337 people have browsed it

flex

1.简述

  1. a.任何元素都可以通过添加`display:flex`属性，转为弹性盒元素
  2. b.转为flex元素后，它的内部的‘子元素’就支持flex布局了
  3. c.容器中的项目会自动转为“行内块元素”（不管之前是什么类型的。）

2.术语

  1. a.容器：具有`display:flex`属性的元素
  2. b.项目：flex容器的子元素
  3. c.主轴：项目排列的轴线
  4. d.交叉轴：与主轴垂直的轴线

3.容器的属性

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-item 项目在交叉中上的对齐方式
4 align-content 项目在多行容器中的对其方式

4.项目属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对其方式
3 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>初识flex（常用属性的介绍）PS：附三种实现水平和垂直居中的方式</title>
  7.     <style>
  8.         /* 将flex容器与项目的常用属性全部进行实例演示，并理解属性的常用值的显示效果 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 附：三种实现水平和垂直居中的方式 */
  15.         /* 1.传统方式实现水平和垂直居中 */
  16.         /* 
  17.         header{
  18.             height: 3em;
  19.             background-color: cadetblue;
  20.         }
  21.         footer{
  22.             height: 2em;
  23.             background-color: darkkhaki;
  24.         }
  25.         .container{
  26.             position: relative;
  27.             min-height: 40em;
  28.             margin: 0.5em 0;
  29.             background-color: cornsilk;
  30.         }
  31.         aside{
  32.             width: 15em;
  33.             min-height: inherit;
  34.             background-color: cyan;
  35.         }
  36.         .container aside:first-of-type{
  37.             position: absolute;
  38.             left: 0;
  39.         }
  40.         .container aside:last-of-type{
  41.             position: absolute;
  42.             right: 0;
  43.         }
  44.         .container main{
  45.             min-height: inherit;
  46.             position: absolute;
  47.             left: 15.5em;
  48.             right: 15.5em;
  49.             background-color: darkseagreen;
  50.         } */
  52.         /* 2.用flex快速实现水平和垂直居中 */
  53.         /* body中除了container这个类，设置全部元素的属性 */
  54.         /* body *:not(.container){
  55.             background-color: khaki;
  56.         }
  57.         header,footer{
  58.             height: 8vh;
  59.         }
  60.         .container{
  61.             height: calc(84vh - 2em);
  62.             display: flex;
  63.             margin: 1em 0;
  64.         }
  65.         aside{
  66.             min-width: 15em;
  67.         }
  68.         main{
  69.             min-width: calc(100% - 30em - 1em);
  70.             margin: 0 0.5em;
  71.         } */
  73.         /* 3.用grid快速实现水平和垂直居中 */
  74.         /* body{
  75.             height: 100vh;
  76.             display: grid;
  77.             整个板块为三行三列
  78.             grid-template-rows: 8vh 1fr 8vh;行，高度：上面8vh 中间自适应 下面8vh
  79.             grid-template-columns: 15em 1fr 15em;列,宽度:左侧15em 中间自适应 右侧15em
  80.             gap:0.5em;间隙
  81.         }
  82.         页眉和页脚应该是通栏的，所以应该设置占据三列
  83.         header,footer{
  84.             grid-column: span 3;
  85.         }
  86.         body > *{
  87.             background-color: khaki;
  88.         } 
  89.         grid虽然强大无比 很简洁，但是不代表到处都要用到它，它更适合整天（宏观）布局，而flex更适合细节处理。 */
  90.         .container{
  91.             display: flex;
  92.             height: 15em;
  93.         }
  94.         .container .item{
  95.             width: 5em;
  96.             /* height: 3em; */
  97.         }
  98.         /* 工作中会存在大量的flex容器的嵌套布局 */
  99.         .container > .item:nth-child(9){
  100.             display: flex;
  101.         }
  102.         .container > .item:nth-child(9) > div{
  103.             background-color: lawngreen;
  104.             border: 1px solid #000;
  105.         }
  106.         .container{
  107. /* 1.弹性项目在主轴的排列方式 */
  108.         /* a.单行容器:当一行放不下的时候会压缩到内容宽度，不会换行 */
  109.             /* flex-direction: row;主轴方向（默认为行模式） */
  110.             /* flex-wrap: nowrap;项目的换行（默认不换行） */
  111.             /* flex-flow: row nowrap; 上面两个的简写*/
  113.         /* b.多行容器：一行显示不下的时候，允许沿着交叉轴换行显示 */
  114.             /* flex-flow: row wrap; 默认为行显示*/
  115.             /* flex-flow: column nowrap; 修改为列显示、不换行*/
  116.             /* flex-flow: column wrap;列显示、换行 */
  118. /* 2.弹性项目在主轴的对齐方式 (设置项目在单行容器中对齐方式的前提是主轴上存在剩余空间)
  119.         空间分配的两种方案：a.将所有项目视为一个整体，在项目组两边进行分配；b.将项目视为一个个主体，在项目之间进行分配。
  120.         */
  121.         /* 默认为左对齐
  122.             justify-content: flex-start; */
  123.             /* 右对齐
  124.             justify-content: flex-end; */
  125.             /* 居中对齐
  126.             justify-content: center; */
  127.             /* 两端对齐（在除了首尾处，其他项目之前平均分配）
  128.             justify-content: space-between;  */
  129.             /* 分散对齐（每个项目两边的空间一致）
  130.             justify-content: space-around;  */
  131.             /* 平均对齐（剩余空间在每个项目中间平均分配）
  132.             justify-content: space-evenly; */
  133. /* 3.单行容器中交叉轴上的对齐方式 */
  134.             /* 默认拉伸(没设置高度的时候会将项目拉伸至容器的高度) 
  135.             align-items: stretch;*/
  136.             /* 顶部对齐 
  137.             align-items: flex-start;*/
  138.             /* 底部对齐 
  139.             align-items: flex-end;*/
  140.             /* 居中对齐 
  141.             align-items: center;*/
  143. /* 3.多行容器中主轴上的对齐方式  */
  144.             /* flex-flow: row wrap;沿主轴方向换行
  145.             align-content: stretch;
  146.             align-content: flex-start;
  147.             align-content: flex-end;
  148.             align-content: center;
  149.             align-content: space-between;
  150.             align-content: space-around;
  151.             align-content: space-evenly; */
  152.         }
  154.         .container .item{
  155. /* 4.项目属性flex */
  156.             /* flex：flex-grow flex-shrink flex-basis */
  157.             /* flex:放大因子 收缩因子 项目在主轴上的基准宽度 */
  158.             /* 默认值：不放大 自动收缩  取容器中的width属性  */
  159.             /* flex: 0 1 auto;
  160.                 flex:initial;
  161.             */
  162.             /* 允许放大和收缩 */
  163.             flex:1 1 auto;
  164.             flex:auto;
  165.             /* 禁止放大和收缩 */
  166.             flex: 0 0 auto;
  167.             flex: none;
  168.             /* flex: 1或者2或者3;等于flex:1 1 auto; */
  169.             /* flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征 */
  170.         }
  171.             /* 第二个项目和第三个项目是第一个项目和第四个项目的二倍 */        
  172.         /* .container .item:first-of-type,.container .item:last-of-type{
  173.             flex: 1;
  174.         }
  175.         .container .item:nth-of-type(2), .container .item:nth-of-type(2)+ *{
  176.             flex: 2;
  177.         } */
  178.         /* 让第二个项目和其他项目的对其方式不一样 */
  179.         /* .container>.item:nth-of-type(2){
  180.             align-self: stretch;
  181.             align-self: flex-start;
  182.             align-self: flex-end;
  183.             align-self: center;
  184.              position: relative;定位也可以用
  185.              left: -2em;
  186.         } */
  188. /* 5.设置项目在主轴上的显示顺序 
  189.         显示顺序默认按照书写的源码顺序，默认序号越小越靠前，序号学大学靠后
  190. */
  191.         .container .item:first-of-type{
  192.             order: 2;
  193.             background-color: lawngreen;
  194.         }
  195.         .container .item:nth-of-type(2){
  196.             order: 3;
  197.             background-color: lightseagreen;
  198.         }
  199.         .container .item:nth-of-type(3){
  200.            order: -1; /* 支持负值 */
  201.             background-color: magenta;
  202.         }
  203.         .container .item:last-of-type{
  204.             background-color: lightcoral;
  205.         }
  206.     </style>
  207. </head>
  208. <body>
  209.     <!-- 1.flex简介：弹性盒布局，这是第一个针对布局的技术；在flex眼中，所有的元素都是行内块；flex中，页面存在两个布局的参考轴，一个叫主轴（控制元素的排列方向），一个是交叉轴（控制元素的换行方向）。 -->
  210.     <div class="container">
  211.         <div class="item">item1</div>
  212.         <div class="item">item2</div>
  213.         <div class="item">item3</div>
  214.         <div class="item">item4</div>
  215.         <!-- <div class="item">item5</div>
  216.         <div class="item">item6</div>
  217.         <div class="item">item7</div>
  218.         <div class="item">item8</div>
  219.         <div class="item">item9</div>
  220.         <div class="item">item10</div>
  221.         <div class="item">item11</div>
  222.         <div class="item">item12</div>
  223.         <div class="item">item13</div>
  224.         <div class="item">item14
  225.             <div>1</div>
  226.             <div>2</div>
  227.             <div>3</div>
  228.         </div> -->
  229.     </div>
  230.     <!-- 附：三种实现水平和垂直居中的方式 -->
  231.     <!-- 常规和flex布置版快
  232.         <header>页眉</header>
  233.         <div class="container">
  234.         <aside>左侧</aside>
  235.         <main>主体</main>
  236.         <aside>右侧</aside>
  237.     </div> -->
  238.     <!-- grid布置板块
  239.     <header>页眉</header>
  240.     <aside>左侧</aside>
  241.     <main>主体</main>
  242.     <aside>右侧</aside>
  243.     <footer>页脚</footer> -->
  244. </body>
  245. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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