简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端学习-1223号作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2263
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
前端学习-1223号作业
天
Original
558 people have browsed it

Flex 布局

1. flex是什么

  1. flex: 弹性布局
  2. flex:兼容性不要担心

2. flex解决了什么问题

  1. 块元素的垂直居中
  2. 元素在容器中 自动伸缩,适应容器大小的变化,特别适合移动端布局

3. flex布局的角色/参与者有哪些

  1. 父元素叫: flex容器(container)
  2. 子元素叫: flex项目(item) 或 flex元素

4. flex 项目的布局方向是什么

  1. flex是一维布局,项目要么水平排列, 要么垂直排列,任何时间都只能沿着一个方向排列
  2. flex项目的排列方向, 称为主轴, 排列方式有二种, 所以主轴也有二种: 水平/行轴,垂直/纵轴
  3. 与主轴对应的轴,称为交叉轴, 副轴, 侧轴

5. 可以用到flex容器上的属性有哪些

5.1、flex-direction: 设置容器中的主轴方向

    1. 5.1.1、flex-direction: row; 按行方向延伸
    1. 5.1.2、flex-direction: column; 按列方向延伸

5.2、flex-wrap: 是否允许创建多行容器, 一行排不下, 是否允许换行显示

  1. 5.2.1、flex-wrap: nowrap; 允许换行
  2. 5.2.2、flex-wrap: wrap; 不允许换行

5.3、flex-flow: 是上面二个属性的简写

  1. flex-flow: 主轴方向 是否换行显示;
  2. flex-flow: row wrap; 按行方向延伸且允许换行

5.4、justify-content: 设置容器中的项目在主轴上的对齐方式

  1. 5.4.1、justify-content: flex-start; 向起始线对齐
  2. 5.4.2、justify-content: flex-end; 向终止线对齐
  3. 5.4.3、justify-content: center; 居中对齐

5.5、justify-content: 可以分配主轴上剩余空间

  1. 5.5.1、justify-content: space-between; 两端对齐
  2. 5.5.2、justify-content: space-around; 分散对齐
  3. 5.5.3、justify-content: space-evenly; 平均对齐

5.6、align-items: 项目在交叉轴上的排列方式

  1. 5.6.1、align-items: flex-start; 顶部对齐
  2. 5.6.2、align-items: flex-end; 底部对齐
  3. 5.6.3、align-items: center; 垂直居中对齐

5.7、align-content: 设置项目在多行容器交叉轴上的对齐方式

  1. 5.7.1、align-content: space-between; 上下对齐
  2. 5.7.2、align-content: space-around; 分散对齐
  3. 5.7.3、align-content: space-evenly; 平均对齐

    6、练习案例

    6.1 原始布局

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>flex术语</title>
    6.  <style>
    7.      .container{
    8.          border: 1px dashed;
    9.          /*只要盒子加了padding,border 就马上加上box-sizing*/
    10.          box-sizing: border-box;
    11.          background-color: lightblue;
    12.      }
    13.      .item{
    14.          width: 100px;
    15.          height: 50px;
    16.          outline: 1px dashed lightcoral;
    17.          background-color: wheat;
    18.      }
    19.   </style>
    20. </head>
    21. <body>
    22. <div class="container">
    23.     <span class="item">1</span>
    24.     <span class="item">2</span>
    25.     <span class="item">3</span>
    26.     <span class="item">4</span>
    27.     <span class="item">5</span>
    28.     <span class="item">6</span>
    29. </div>
    30. </body>
    31. </html>

    6.2、转为弹性盒子，默认主轴是行

    1. .container{
    2.          /*转为单性盒子*/
    3.          display: flex;
    4.          /*子元素全部转为：行内块元素，水平排列，可以设置宽和高*/
    5.          /*1、设置主轴方向，默认为行*/
    6.          flex-direction: row;
    7.          /*2、是否换行*/
    8.          flex-wrap：wrap;
    9.      }

    6.3、主轴方向转换成列

    1. .container{
    2.          /*转为单性盒子*/
    3.          display: flex;
    4.          /*子元素全部转为：行内块元素，水平排列，可以设置宽和高*/
    5.          /*1、设置主轴方向，默认为行*/
    6.          flex-direction: column;
    7.          /*2、是否换行*/
    8.          flex-wrap：wrap;
    9.          height: 200px;
    10.          /*3、flex-wrap: 主轴方向，是否换行;*/
    11.          /*flex-flow: column wrap;*/
    12.      }

    6.4、主轴为行，可换行，排列方式

    1. 6.4.1、居左
    1. 6.4.2、居中
    1. 6.4.3、居右
    1. .container{
    2.          /*4、设置容器在主轴方向上的对齐方式*/
    3.          justify-content: flex-start;
    4.          justify-content: center;
    5.          justify-content: flex-end;
    6.      }

    6.5、主轴为行，可换行，对齐方式

  10. 6.4.1、两端对齐
  12. 6.4.2、分散对齐
  14. 6.4.3、平均对齐
    1. .container{
    2.          /*可以分配主轴上的剩余空间*/
    3.          justify-content:space-between; /*两端对齐*/
    4.          justify-content:space-around; /*分散对齐*/
    5.          justify-content:space-evenly; /*平均对齐*/
    6.      }

    6.6、主轴为行，可换行，交叉轴排列方式

    1. 6.6.1、居上
    1. 6.6.2、居中
    1. 6.6.3、居下
    1. .container{
    2.          /*5、项目在交叉轴上的对齐方式*/
    3.          align-items: flex-start;
    4.          align-items: flex-end;
    5.          align-items: center;
    6.      }

    6.7、主轴为行，可换行，交叉轴对齐方式

  22. 6.7.1、两端对齐
  24. 6.7.2、分散对齐
  26. 6.7.3、平均对齐
    1. .container{
    2.          /*6、align-content: 设置项目在多行容器交叉轴上的对齐方式*/
    3.          align-content: space-between; /*两端对齐*/
    4.          align-content: space-around; /*分散对齐*/
    5.          align-content: space-evenly; /*平均对齐*/
    6.      }
    7、手写作业
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！