移动web-Flex布局

Hsu_Ee
288 阅读3分钟

一.认识Flex布局

flex.png

  • Flex布局/弹性布局：
    • 是一种浏览器提倡的布局模型
    • 布局网页更简单、灵活
    • 避免浮动脱标的问题
  • Flex布局模型构成
    • 作用
      • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
      • Flex布局非常适合结构化布局
    • 设置方式
      • 父元素添加 display: flex，子元素可以自动的挤压或拉伸
    • 组成部分
      • 弹性容器
        • 语法：display: flex(给父盒子添加)
        • 特点：1.默宽度就是父元素的宽度，高度由内容所撑开
      • 弹性盒子
        • 弹性盒子：就是弹性容器的最近一级子元素
        • 特点：
          • 1.默认宽度由内容所撑开，默认的高度和父元素一样高；
          • 2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高;
          • 3.弹性盒子默认不会换行，会沿着主轴方向一行显示；
          • 4.要注意弹性盒子的概念
      • 主轴
      • 侧轴 / 交叉轴
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex组成</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* df */
        /* 
        添加了df的这个盒子，叫做弹性容器
        特点：
         1.默宽度就是父元素的宽度，高度由内容所撑开
        */
        display: flex;
        width: 1000px;
        height: 600px;
        background: orange;
      }
      .box span {
        /* 
        弹性盒子：就是弹性容器的最近一级子元素
        特点：
         1.默认宽度由内容所撑开，默认的高度和父元素一样高；
         2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高;
         3.弹性盒子默认不会换行，会沿着主轴方向一行显示；
         4.要注意弹性盒子的概念
        */
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }

      .box a {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <a href="#">123</a>

      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
  </body>
</html>

二、Flex布局主轴对齐方式

justify-content.png

  • 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
  • 修改主轴对齐方式属性: justify-content
    • flex-start: 从左边开始显示，默认值 start.png
    • flex-end：从右边开始显示 end.png
    • center：在主轴上居中显示
      center.png
    • space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 around.png
    • space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离 between.png
    • space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 evenly.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴对齐方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        /* df */
        /* 
        主轴方向的对齐方式，也是给弹性容器添加
        */
        /* jc  flex-start: 从左边开始显示，默认值*/
        justify-content: flex-start;

        /* flex-end：从右边开始显示 */
        justify-content: flex-end;

        /* jcc center：在主轴上居中显示 */
        justify-content: center;

        /* jcsad space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 */
        justify-content: space-around;

        /* jcsb space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离*/
        justify-content: space-between;

        /* space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 */
        justify-content: space-evenly;

        display: flex;
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box div {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

三、Flex布局侧轴对齐方式

align-items.png

  • 使用align-items调节元素在侧轴的对齐方式
  • 修改主轴对齐方式属性：
    • align-items（添加到弹性容器）
      • align-items: flex-start; /默认属性/ flex-start.png
      • align-items: flex-end;/结束的地方，下面显示/ flex-end.png
      • align-items: center;/* center：垂直居中 aic */ flex-center.png
      • align-items: stretch;/stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样/ flex-stretch.png
    • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）,是给需要单独控制侧轴方向对齐方式的弹性盒子添加
      algin-self.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>侧轴对齐方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* df */
        /* 
        侧轴控制的是垂直方向的对齐方式 ai
        */

        /* 默认值 */
        align-items: flex-start;

        /* flex-end:结束的地方，下面显示 */
        align-items: flex-end;

        /* center：垂直居中 aic */
        align-items: center;

        /* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
        align-items: stretch;
        display: flex;

        justify-content: center;
        align-items: center;
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box div {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }

      .box .hang {
        /* 
        属性值和ai一样的
        as是给需要单独控制侧轴方向对齐方式的弹性盒子添加
         */
        align-self: center;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div class="hang">3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

四、Flex布局伸缩比

  • 使用flex属性修改弹性盒子伸缩比：flex 给弹性盒子添加
    • 语法 flex: 数值(整数)
      1. 所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配 flex均分.png flex比例.png
      2. 其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
        flex1.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex伸缩比例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        display: flex;
        width: 1000px;
        height: 600px;
        background: orange;
      }

      /* 
      伸缩比：flex 给弹性盒子添加
       1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
       2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
      */
      .box div {
        width: 200px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }

      /* 需求：李狗蛋吃一份，张三吃两份，张翠华吃三份 */
      /* .box .li {
        flex: 1;
      } */

      .box .san {
        flex: 1;
      }

      /* .box .zh {
        flex: 1;
      } */
    </style>
  </head>

  <body>
    <div class="box">
      <div class="li">李狗蛋</div>
      <div class="san">张三</div>
      <div class="zh">张翠花</div>
    </div>
  </body>
</html>

五、水平垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* df */
        display: flex;
        /* jcc 水平居中 */
        justify-content: center;
        /* aic 垂直居中 */
        align-items: center;
        width: 400px;
        height: 400px;
        background: #6cf;
      }

      .son {
        width: 120px;
        height: 120px;
        background-color: #0a0;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="son"></div>
    </div>
  </body>
</html>

居中.png

六、主轴方向

  • 使用flex-direction改变元素排列方向 flex-d.png
    • Flex布局模型中，弹性盒子默认沿着水平方向排列
    • 主轴默认是水平方向, 侧轴默认是垂直方向
    • 修改主轴方向属性: flex-direction

七、弹性盒子换行及侧轴对齐方式

  • 使用flex-wrap实现弹性盒子多行排列效果
    • 弹性盒子换行显示 : flex-wrap: wrap;
  • 控制多行的侧轴对齐方式
    • align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap;
    • align-content取值和justify-content一样的
      • align-content: flex-start; align-content-fs.png
      • align-content: flex-end; align-content-fe.png
      • align-content: center; align-content-c.png
      • align-content: space-around; align-content-sa.png
      • align-content: space-between; align-content-bt.png
      • align-content: space-evenly; align-content-evn.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹性盒子模型子元素换行显示</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        /* 添加df */
        display: flex;
        /* 让弹性盒子换行显示 fwp */
        flex-wrap: wrap;

        /* 
        控制多行的侧轴对齐方式
         align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap;
         align-content取值和jc一样的

        控制单行的侧轴排列方式
          align-items flex-start flex-end center sh
        */
        align-content: flex-start;
        align-content: flex-end;
        align-content: center;
        align-content: space-around;
        align-content: space-between;
        align-content: space-evenly;
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box span {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝