前端基础进阶4

前端基础进阶

Flex布局

  • 主轴方向

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

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

      • 水平方向。

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

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

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

    <!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>主轴方向</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基本相同

      <!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>弹性盒子换行</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>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
          </div>
      </body>
      ​
      </html>

posted @   守漠待花开  阅读(162)  评论(0)  编辑  收藏  举报
相关博文：
·  前端基础进阶3
·  前端基础进阶1
·  No.2.4
·  Web进阶——Flex布局
·  9-web前端 flex弹性布局
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示