search

博客列表 >flex容器的认识

flex容器的认识

咸鱼老爷
咸鱼老爷原创
2021年02月26日 17:24:40666浏览

flex简介

  • flex:弹性盒布局，这是一个针对布局的技术，之前是-table,div,css,position,float等；
  • 在flex容器中，所有元素都是行内块；
  • 在flex容器中，页面存在二个布局的参考轴，一个叫做主轴（元素的排列），还有一个交叉轴，控制元素的换行方向；

    1、术语

    1、容器：具有”display:flex”属性的元素
    2、项目：flex容器的子元素
    3、主轴：项目排列的轴线
    4、交叉轴：与主轴垂直的轴线

    2、容器属性

    1、 flex-flow 主轴方向与换行方式
    2、 justify-content 项目与主轴上的对齐方式
    3、 align-items 项目在交叉轴上的对齐方式
    4、 align-content 项目在多行容器中的对齐方式

    3、项目属性

    1、flex 项目的缩放比例与基准宽度
    2、align-self 单个项目在交叉轴上的对齐方式
    3、order 项目在主轴上的排列顺序

    主轴排列

    flex-direction:row |column;设置主轴；
    flex-wrap:nowrap 换行
    简写：flex-flow:row nowrap
    垂直排列
    1.   <style>
    2.       * {
    3.           padding: 0;
    4.           margin: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       .container {
    8.           display: flex;
    9.           flex-flow: column nowrap;
    10.       }
    11.       .container .item {
    12.           width: 5em;
    13.           height: 5em;
    14.           border: 1px solid #ccc;
    15.           padding: 1em;
    16.           margin: 1em;
    17.       }
    18.   </style>
    19. <body>
    20.   <div class="container">
    21.       <div class="item">1</div>
    22.       <div class="item">2</div>
    23.       <div class="item">3</div>
    24.   </div>
    25. </body>
    效果图

    单行容器对齐方式

    主轴对齐方式justify-content

    设置项目在单行容器上的对齐前提：主轴上存在剩余空间
    空间分配
    1、将所有项目作为一个整体，在项目组俩边进行分配；
    justify-content：flex-start 左对齐

    justify-content：flex-end 右对齐

    justify-content：flex-center 居中对齐

    2、将项目作为单个独立个体，在项目之间进行分配；
    justify-content：space-between 俩端对齐

    justify-content：space-around 分散对齐

    justify-content: space-evenly 平均对齐
  1.     <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         .container {
  8.             border: 1px solid #ccc;
  9.             display: flex;
  10.             /* 左对齐 */
  11.             justify-content: flex-start;
  12.             /* 右对齐 */
  13.             justify-content: flex-end;
  14.             /* 居中对齐 */
  15.             justify-content: center;
  16.             /* 俩端对齐 */
  17.             justify-content: space-between;
  18.             /* 分散对齐 */
  19.             justify-content: space-around;
  20.             justify-content: space-evenly;
  21.         }
  22.         .container .item {
  23.             width: 5em;
  24.             height: 5em;
  25.             border: 1px solid #ccc;
  26.             padding: 1em;
  27.             margin: 1em;
  28.         }
  29.     </style>
  31. <body>
  32.     <div class="container">
  33.         <div class="item">1</div>
  34.         <div class="item">2</div>
  35.         <div class="item">3</div>
  36.     </div>
  37. </body>

交叉轴对齐方式 align-items

1、默认拉伸 align-items: stretch;
2、上对齐 align-items: flex-start;
3、下对齐 align-items: flex-end;
4、居中对齐 align-items: center;

多行容器对齐方式 align-content

1、拉伸 align-content: stretch；
2、上对齐 align-content: flex-start；
3、下对齐 align-content: flex-end;
4、俩端对齐 align-content: space-between;
5、分散对齐 align-content: space-around;
6、平均对齐 align-content: space-evenly；

项目属性 flex

用在容器项目上的属性 flex：放大因子 收缩因子 基准宽度
默认值 不放大 可收缩 当前容器中的widh；
flex:0 1 auto;
简写flex:initial;
允许放大和收缩
flex:1 1 auto;
简写flex:auto;
禁止放大和收缩
flex:0 0 auto;
简写flex:none;
如果只有一个数字，省掉后面第二个参数表示的是放大因子
flex:1等价于 flex:1 1 auto;

flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征；
单个项目对齐方式align-self;支持定位

项目在主轴上的显示顺序

order：数值

  1.     <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         .container {
  8.             border: 1px solid #ccc;
  9.             display: flex;
  10.             flex-flow: row wrap;
  11.         }
  12.         .container .item {
  13.             width: 5em;
  14.             height: 5em;
  15.             border: 1px solid #ccc;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container .item:first-of-type {
  20.             order: 4;
  21.             background-color: wheat;
  22.         }
  23.         .container .item:last-of-type {
  24.             order: 1;
  25.             background-color: yellowgreen;
  26.         }
  27.     </style>
  29. <body>
  30.     <div class="container">'
  31.         <div class="item">1</div>
  32.         <div class="item">2</div>
  33.         <div class="item">3</div>
  34.         <div class="item">4</div>
  35.     </div>
  36. </body>

效果图

flex嵌套

实际工作中flex嵌套应用很多

  1.   <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         .container {
  8.             display: flex;
  9.         }
  10.         .container .item {
  11.             width: 5em;
  12.             height: 5em;
  13.             border: 1px solid #ccc;
  14.             padding: 1em;
  15.             margin: 1em;
  16.         }
  17.         .container .item:nth-of-type(4) {
  18.             display: flex;
  19.         }
  20.     </style>
  22. <body>
  23.     <div class="container">
  24.         <div class="item">1</div>
  25.         <div class="item">2</div>
  26.         <div class="item">3</div>
  27.         <div class="item">4
  28.             <div>5</div>
  29.             <div>6</div>
  30.             <div>7</div>
  31.         </div>
  32.     </div>
  33. </body>

效果图

flex快速实现水平垂直居中

  • justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
  • align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
  1.  <style>
  2.         .box {
  3.             width: 15em;
  4.             height: 15em;
  5.             background-color: seagreen;
  6.             display: flex;
  7.             justify-content: center;
  8.             align-items: center;
  9.         }
  10.         .box div {
  11.             width: 5em;
  12.             height: 5em;
  13.             background-color: sienna;
  14.         }
  15.     </style>
  17. <body>
  18.     <div class="box">
  19.         <div></div>
  20.     </div>
  21. </body>

效果图

flex实现简单三列布局

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         header,
  8.         footer {
  9.             height: 8vh;
  10.             background-color: steelblue;
  11.         }
  12.         .container {
  13.             height: calc(84vh - 1em);
  14.             display: flex;
  15.             margin: .5em 0;
  16.         }
  17.         .container aside {
  18.             min-width: 15em;
  19.             background-color: turquoise;
  20.         }
  21.         .container main {
  22.             min-width: calc(100% - 31em);
  23.             background-color: wheat;
  24.             margin: 0 .5em;
  25.         }
  26.     </style>
  29. <body>
  30.     <header>头部</header>
  31.     <div class="container">
  32.         <aside>左侧</aside>
  33.         <main>内容</main>
  34.         <aside>右侧</aside>
  35.     </div>
  36.     <footer>底部</footer>
  37. </body>

效果图

上一条：京东app首页练习下一条：php学习小结（类成员重载、全局成员、空间声明及成员访问）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多