前端基础进阶4

前端基础进阶

Flex布局

  • 主轴方向

    • 使用flex-direction改变元素排列方向

    • Flex布局模型中，弹性盒子默认沿着哪个方向排列？

      • 水平方向。

      • 如何实现内容垂直排列？

    • 主轴默认是水平方向, 侧轴默认是垂直方向

    • 修改主轴方向属性: flex-direction


    <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>主轴方向title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            li {
                list-style: none;
            }
    ?
            .box li {
                display: flex;
                /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
                /* 修改主轴方向: 列 */
                flex-direction: column;
    ?
                /* 视觉效果: 实现盒子水平居中 */
                align-items: center;
    ?
                /* 视觉效果: 垂直居中 */
                justify-content: center;
                
    ?
                width: 80px;
                height: 80px;
                border: 1px solid #ccc;
            }
            
            .box img {
                width: 32px;
                height: 32px;
            }
        style>
    head>
    ?
    <body>
        <div class="box">
            <ul>
                <li>
                    <img src="./images/media.png" alt="">
                    <span>媒体span>
                li>
            ul>
        div>
    body>
    ?
    html>

  • 弹性盒子换行

    • 默认情况下，多个弹性盒子如何显示？

      • 虽然宽度不够，但也不换行，挤压显示。

    • 使用flex-wrap实现弹性盒子多行排列效果

    • 弹性盒子换行显示 : flex-wrap: wrap;

      • 加给父级

    • 调整行对齐方式 ：align-content

      • 取值与justify-content基本相同


      <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>弹性盒子换行title>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
      ?
              .box {
                  display: flex;
      ?
                  /* 默认值, 不换行 */
                  /* flex-wrap: nowrap; */
      ?
                  /* 弹性盒子换行 */
                  flex-wrap: wrap;
      ?
                  /* 调节行对齐方式 */
                  /* align-content: center; */
                  /* align-content: space-around; */
                  align-content: space-between;
      ?
                  height: 500px;
                  border: 1px solid #000;
              }
              
              .box div {
                  width: 100px;
                  height: 100px;
                  background-color: pink;
              }
          style>
      head>
      ?
      <body>
          <div class="box">
              <div>1div>
              <div>2div>
              <div>3div>
              <div>4div>
              <div>5div>
              <div>6div>
              <div>7div>
              <div>8div>
          div>
      body>
      ?
      html>

移动web

相关

移动web_平面转换

标签