search

博客列表 >初识flex（常用属性的介绍）PS：附三种实现水平和垂直居中的方式

初识flex（常用属性的介绍）PS：附三种实现水平和垂直居中的方式

景云
景云原创
2021年01月06日 21:59:561336浏览

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>
上一条：构造函数|对象原型-dom获取-增删改查下一条：第14章 0104-JS变量与函数基础，学习心得，笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多