Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器的认识
Blogger Information
Blog 45
fans 0
comment 0
visits 34636
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
656 people have browsed it

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>

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：md有序列表语法不对
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