HTML&CSS-06：Flex布局

最新推荐文章于 2024-05-08 20:27:05 发布
最新推荐文章于 2024-05-08 20:27:05 发布
阅读量320 收藏 6
点赞数 3
分类专栏： 前端学习 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ying_ph/article/details/137269530
版权

06-Flex布局

思维导图：
在这里插入图片描述

练习1-小米登录

在这里插入图片描述

第一步搭建大盒子
<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .mi {
      width: 339px;
      height: 356px;
      background-color: pink;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="mi"></div>
</body>

</html>

在这里插入图片描述

logo设置

一般情况下，logo都是背景图片，而且是 h1

html设置

<body>
  <div class="mi">
    <h1></h1>
  </div>
</body>

css 设置

 /* h1是logo 一般情况下都是背景 */
    .mi h1 {
      width: 49px;
      height: 49px;
      margin: 0 auto;
      background: #ff4c00 url(./images/mi-logo.png) no-repeat;
      /* background-color: red; */
    }

效果如下：

在这里插入图片描述

标题和input设置

html

<h2>小米账号登录</h2>
<input type="text" placeholder="邮箱/手机/小miID">

css

.mi h2 {
  text-align: center;
  font-weight: 400;
  font-size: 28px;
  margin: 32px 0 44px;
}

.mi input {
  width: 339px;
  height: 50px;
  border: 1px solid #ccc;
  padding-left: 12px;
}

效果：

在这里插入图片描述

密码框和登录按钮

html

<input type="password" placeholder="密码">
<button>登录</button>

css

.mi input {
  width: 339px;
  height: 50px;
  border: 1px solid #ccc;
  padding-left: 12px;
  margin-bottom: 12px;
}

.mi button {
  width: 339px;
  height: 50px;
  background-color: #ff4c00;
  border: 0;
  font-size: 14px;
  color: #fff;
}

.mi button:hover {
  background-color: red;
}

收工

在这里插入图片描述

完整写法：

<!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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .mi {
        width: 339px;
        height: 356px;
        /* background-color: pink; */
        margin: 100px auto;
      }

      /* h1是logo 一般情况下都是背景 */
      .mi h1 {
        width: 49px;
        height: 49px;
        margin: 0 auto;
        background: #ff4c00 url(./images/mi-logo.png) no-repeat;
        /* background-color: red; */
      }

      .mi h2 {
        text-align: center;
        font-weight: 400;
        font-size: 28px;
        margin: 32px 0 44px;
      }

      .mi input {
        width: 339px;
        height: 50px;
        border: 1px solid #ccc;
        padding-left: 12px;
        margin-bottom: 12px;
      }

      .mi button {
        width: 339px;
        height: 50px;
        background-color: #ff4c00;
        border: 0;
        font-size: 14px;
        color: #fff;
      }

      .mi button:hover {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <h1></h1>
      <h2>小米账号登录</h2>
      <input type="text" placeholder="邮箱/手机/小miID">
      <input type="password" placeholder="密码">
      <button>登录</button>
    </div>
  </body>

</html>

爱宠案例

效果：

在这里插入图片描述

大盒子 dog 搭建
<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .dog {
      width: 262px;
      height: 342px;
      /* background-color: pink; */
      margin: 100px auto;
      border: 1px solid #090;
      background: url(./images/bg.gif);
    }
  </style>
</head>

<body>
  <div class="dog"></div>








  <!-- 爱宠知识
  养狗比养猫对健康更有利
  日本正宗柴犬亮相，你怎么看柴犬
  狗狗歌曲《新年旺旺》
  带宠兜风，开车带宠需要注意什么？
  【爆笑】这狗狗太不给力了
  狗狗与男童相同着装拍有爱造型照
  狗狗各个阶段健康大事件
  调皮宠物狗陷在沙发里的搞笑瞬间
  为什么每次大小便后，会用脚踢土？ -->
</body>

</html>

在这里插入图片描述

h2标题的做法

在这里插入图片描述

<div class="dog">
  <h2>爱宠知识</h2>
</div>

css

.dog {
  width: 262px;
  height: 342px;
  /* background-color: pink; */
  margin: 100px auto;
  border: 1px solid #090;
  background: url(./images/bg.gif);
  padding: 9px 9px 0;
}

.dog h2 {
  height: 25px;
  line-height: 25px;
  border-left: 5px solid #c9e143;
  font-size: 18px;
  color: #fff;
  padding-left: 10px;
}
ul 布局
<ul>
  <li><a href="#">养狗比养猫对健康更有利</a></li>
  <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
  <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
  <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
  <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
  <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
  <li><a href="#">狗狗各个阶段健康大事件</a></li>
  <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
  <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
</ul>

css

.dog ul {
  /* 背景给ul好一些 */
  background-color: #fff;
  /* 给ul padding 这样可以把li 挤到中间 */
  padding: 0 9px;
  margin-top: 5px;
}

效果

在这里插入图片描述

修改li和a链接的样式
.dog ul li {
  height: 30px;
  line-height: 30px;
  /* 大师的 */
  border-bottom: 1px dashed #000;
}

.dog ul li a {
  font-size: 12px;
  text-decoration: none;
}

在这里插入图片描述

给li添加背景图片

给li添加， 让图片左侧对齐，垂直居中， 让li 做内边距 14px

.dog ul li {
  height: 31px;
  line-height: 31px;
  /* 大师的 */
  border-bottom: 1px dashed #000;
  /*代码*/
  background: url(./images/tb.gif) no-repeat left center;
  padding-left: 14px;
}

完整的写法：

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .dog {
      width: 262px;
      height: 342px;
      /* background-color: pink; */
      margin: 100px auto;
      border: 1px solid #090;
      background: url(./images/bg.gif);
      padding: 9px 9px 0;
    }

    .dog h2 {
      height: 25px;
      line-height: 25px;
      border-left: 5px solid #c9e143;
      font-size: 18px;
      color: #fff;
      padding-left: 10px;
    }

    .dog ul {
      /* 背景给ul好一些 */
      background-color: #fff;
      /* 给ul padding 这样可以把li 挤到中间 */
      padding: 0 9px;
      margin-top: 5px;
    }

    .dog ul li {
      height: 31px;
      line-height: 31px;
      /* 大师的 */
      border-bottom: 1px dashed #000;
      background: url(./images/tb.gif) no-repeat left center;
      padding-left: 14px;
    }

    .dog ul li a {
      font-size: 12px;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="dog">
    <h2>爱宠知识</h2>
    <ul>
      <li><a href="#">养狗比养猫对健康更有利</a></li>
      <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
      <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
      <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
      <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
      <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
      <li><a href="#">狗狗各个阶段健康大事件</a></li>
      <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
      <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
    </ul>
  </div>


</body>

</html>

在这里插入图片描述

目标：熟练使用 Flex 完成结构化布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

在这里插入图片描述

02-浮动(了解即可，不用复习)

基本使用

作用：让块元素水平排列。

属性名：float

属性值

  • left：左对齐
  • right：右对齐
<!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>
    .left,
    .right {
      /* width: 200px; */
      height: 200px;
      background-color: pink;
    }

    .left {
      /* 左浮动 */
      float: left;
      margin-left: 20px;
    }

    .right {
      /* 右侧浮动 */
      float: left;
      height: 300px;
      background-color: purple;
    }

    .bottom {
      height: 50px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="left">左侧123</div>
  <div class="right">右侧123</div>
  <div class="bottom"></div>
</body>

</html>

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

在这里插入图片描述

产品区域布局

在这里插入图片描述

左右布局

html结构

  <div class="mi">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>

css样式

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .mi {
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      background-color: purple;
    }
</style>

效果：

在这里插入图片描述

区域小li布局

完整写法

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .mi {
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      /* background-color: purple; */
    }

    .right li {
      float: left;
      width: 234px;
      height: 300px;
      background-color: pink;
      margin-bottom: 14px;
      margin-right: 14px;
    }

    /* 让第4,8 个li 去掉外边距 */
    .right li:nth-child(4n) {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <div class="mi">
    <div class="left">左侧</div>
    <div class="right">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

在这里插入图片描述

<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>
额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>
单伪元素法
  1. 准备 after 伪元素
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
  1. 准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
overfow法
.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

03-Flex布局（重点）

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

在这里插入图片描述

Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 侧轴 / 交叉轴：默认在垂直方向

在这里插入图片描述

主轴对齐方式

属性名：justify-content

在这里插入图片描述

重点记住标红的。如果非要问我那个常用，我只能说是 space-between 

justify-content: space-between;

显示效果：两侧没缝隙

在这里插入图片描述

justify-content: space-around;

效果如下： 记住2倍

在这里插入图片描述

justify-content: space-evenly;

效果如下： 记住空隙一样大

在这里插入图片描述

 justify-content: center;

效果如下： 经常用于让一个盒子水平居中

在这里插入图片描述

记忆：

  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around
<!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 {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* justify-content: space-between; */
      /* justify-content: space-around; */
      justify-content: space-evenly;
      width: 900px;
      height: 200px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

侧轴对齐方式

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
  • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

在这里插入图片描述

<!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 {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;

      /* 侧轴的对齐方式 */
      /* 顶部对齐 */
      /* align-items: flex-start; */
      /* 底部对齐 */
      /* align-items: flex-end; */
      /* 居中对齐 */
      /* align-items: center; */
      /* 默认的 拉伸和父亲一样 */
      align-items: stretch;
      width: 900px;
      height: 500px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      /* height: 200px; */
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</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>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

综合案例

在这里插入图片描述

大盒子搭建

html结构

<div class="box">
    <div class="box-hd">头部</div>
    <div class="box-bd">主题</div>
  </div>

css 样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.box {
  width: 1240px;
  height: 540px;
  background-color: pink;
  margin: 100px auto;
}

显示：

在这里插入图片描述

头部标题制作

html写法

<div class="box">
  <div class="box-hd">
    <h2>新鲜好物
      <span>新鲜出炉 品质靠谱</span>
    </h2>
    <a href="#">查看更多> </a>
  </div>
  <div class="box-bd">主题</div>
</div>

css 写法

.box-hd {
  /* 给父亲添加 flex 里面的孩子  h2 和 a 可以一样显示 */
  display: flex;
  /* 两侧没缝隙 主轴对齐 */
  justify-content: space-between;
  /* 侧轴底对齐 */
  align-items: flex-end;
  padding: 40px 0;
}

效果：

在这里插入图片描述

修饰文字

css样式


.box-hd h2 {
  font-size: 32px;
  font-weight: 400;
}

.box-hd h2 span {
  font-size: 16px;
  color: #999;
}

.box-hd a {
  font-size: 16px;
  color: #999;
}

展示：

在这里插入图片描述

底部小li 制作

html结构

<ul>
  <li>
    <img src="./images/1.jpg" alt="">
    <h4>全防水HABU旋钮</h4>
    <p>¥444.00</p>
  </li>
</ul>

css样式

.box-bd li {
  width: 306px;
  height: 406px;
  background-color: skyblue;
  text-align: center;
}

.box-bd li img {
  width: 100%;
}

.box-bd li h4 {
  font-size: 22px;
  font-weight: 400;
  margin: 12px 0 20px;
}

.box-bd li p {
  font-size: 18px;
  color: orangered;
}

展示

在这里插入图片描述

让多个li显示到一行并且对齐

css样式

.box-bd ul {
  /* 一定是li的亲爸爸 */
  display: flex;
  justify-content: space-between;
}

展示

在这里插入图片描述

最后完整效果

在这里插入图片描述

<!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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .box {
        width: 1240px;
        height: 540px;
        /* background-color: pink; */
        margin: 100px auto;
      }

      .box-hd {
        /* 给父亲添加 flex 里面的孩子  h2 和 a 可以一样显示 */
        display: flex;
        /* 两侧没缝隙 主轴对齐 */
        justify-content: space-between;
        /* 侧轴底对齐 */
        align-items: flex-end;
        padding: 40px 0;
      }

      .box-hd h2 {
        font-size: 32px;
        font-weight: 400;
      }

      .box-hd h2 span {
        font-size: 16px;
        color: #999;
      }

      .box-hd a {
        font-size: 16px;
        color: #999;
      }

      .box-bd ul {
        /* 一定是li的亲爸爸 */
        display: flex;
        justify-content: space-between;
      }

      .box-bd li {
        width: 306px;
        height: 406px;
        background-color: skyblue;
        text-align: center;
      }

      .box-bd li img {
        width: 100%;
      }

      .box-bd li h4 {
        font-size: 22px;
        font-weight: 400;
        margin: 12px 0 20px;
      }

      .box-bd li p {
        font-size: 18px;
        color: orangered;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 头部部分 -->
      <div class="box-hd">
        <h2>新鲜好物
          <span>新鲜出炉 品质靠谱</span>
        </h2>
        <a href="#">查看更多> </a>
      </div>

      <!-- 主体部分 -->
      <div class="box-bd">
        <ul>
          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="box">
      <!-- 头部部分 -->
      <div class="box-hd">
        <h2>新鲜好物
          <span>新鲜出炉 品质靠谱</span>
        </h2>
        <a href="#">查看更多> </a>
      </div>

      <!-- 主体部分 -->
      <div class="box-bd">
        <ul>
          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>

          <li>
            <img src="./images/1.jpg" alt="">
            <h4>全防水HABU旋钮</h4>
            <p>¥444.00</p>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

自动换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

•wrap：换行

•nowrap：不换行（默认）

小米flex布局

在这里插入图片描述

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .mi {
      /* 父控子 */
      display: flex;
      justify-content: space-between;
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      width: 978px;
      height: 614px;
      background-color: purple;
    }

    .right ul {
      display: flex;
      /* 让li 自动换行 */
      flex-wrap: wrap;
      /* 主轴两侧对齐 */
      justify-content: space-between;

    }

    .right li {
      width: 234px;
      height: 300px;
      background-color: orange;
      list-style: none;
      margin-bottom: 14px;
    }
  </style>
</head>

<body>
  <div class="mi">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
</body>

</html>

多行对齐方式

如果有多行侧轴对齐，则去找align-content

如果是单行侧轴对齐，则去找 align-items

属性名：align-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>Document</title>
  <style>
    .box {
      display: flex;
      /* 换行 */
      flex-wrap: wrap;
      /* 主轴对齐 */
      justify-content: space-between;
      /* 侧轴单行控制 */
      /* align-items: center; */
      /* 侧轴多行对齐 */

      /* align-content: center; */
      align-content: space-between;
      width: 1000px;
      /* 亲父亲得有高度 */
      height: 500px;
      border: 3px solid #000;
      margin: 100px auto;
    }

    .box div {
      width: 300px;
      height: 200px;
      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>
</body>

</html>

在这里插入图片描述

修改主轴方向

为什么要修改主轴？ 只要父亲添加了display: 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>Document</title>
  <style>
    .box {
      display: flex;
      /* 默认主轴是横向 row  */
      /* 更改主轴的方向 我想要1和2盒子竖着排列 */
      flex-direction: column;
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      /* 主轴 */
      justify-content: center;
      /* 侧轴 */
      align-items: center;

    }

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

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
  </div>
</body>

</html>

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

<!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 {
      display: flex;
      width: 80%;
      height: 200px;
      border: 1px solid #000;
    }

    .box span {
      /* 不会区分原来属于什么模式 */
      /* width: 100px;
      height: 100px;
      background-color: pink; */
      flex: 1;
      background-color: pink;
    }

    /* 圣杯布局两侧固定，中间自适应 */
    .left,
    .right {
      width: 100px;
      background-color: skyblue;
    }

    .center {
      flex: 1;
      background-color: purple;
    }

    .center1 {
      flex: 2;
      background-color: pink;
    }
  </style>
</head>

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

  <div class="box">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="center1">中</div>
    <div class="right">右</div>
  </div>
</body>

</html>

在这里插入图片描述

作业

  1. 利用flex 完成以下效果图

在这里插入图片描述

  1. 利用flex完成京东效果

    在这里插入图片描述

说明：

  1. 大盒子 宽度 1150 高度 390

  2. 左侧盒子宽度为 350像素， 中间盒子宽度 350， 右侧盒子宽度 350

  3. 里面填充图片即可

    ​

一枚小蜗牛H
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Taller-CSS-Flex-Grid:现代布局研讨会
04-08
- `display: flex`：将容器设置为Flex容器，开启Flex布局。 - `flex-direction`：定义主轴方向，可选值有row（默认，水平）、column（垂直）等。 - `justify-content`：调整主轴上的元素对齐方式，如居中、两端...
浅析小米登录/注册页面（原生）
MoYuP_ENG的博客
08-29 6866
主要介绍了注册页面的整体布局的内容。
php判断年龄
2302_80368954的博客
10-27 31
echo '不可以上网';echo'可以上网';
制作小米登录页面
最新发布
2401_83905000的博客
05-08 467
【代码】制作小米登录页面。
HTML 网页制作 盒子设计 CSS
热门推荐
王者生辉的博客
08-07 2万+
制作简单的网页结构以北京大学官网为例： 以下是对应的网页结构及参数 需要用到盒子的知识 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距)- 清除..
Flex 布局详解（附思维导图）
萌宅鹿的技术小屋
07-01 963
Flex 布局简介 详细的知识点：【重识 HTML + CSS】知识点目录 简介 flex 布局（Flexible 布局，弹性布局）是在小程序开发中经常使用的布局 官方文档： https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/ 开启了 flex 布局的元素叫 flex container flex container 里面的直接子元素叫做 flex items 设置 display 属性为 flex 或
黑马程序员——html css基础——day06——Flex布局
qq_56444564的博客
02-02 957
新鲜出炉 品质靠谱
html-css-task：html && css任务
02-22
Flexbox 适用于一维布局（行或列），通过`display: flex;`开启，并可以调整子元素的顺序、大小和对齐方式。Grid 则适用于二维布局，通过`display: grid;`创建网格系统，可以精确控制单元格大小和排列。 除此之外，...
css-problems:css flex-exercises
03-09
这个项目可能包括创建各种布局，如一列或多列、对齐方式、方向切换、弹性元素的顺序调整等，以帮助开发者巩固和熟练运用Flexbox属性，例如`display: flex`、`flex-direction`、`justify-content`、`align-items`、`...
CSS-Layout:AluraCSS布局课程
04-19
本课程“CSS-Layout: AluraCSS布局课程”专注于CSS布局，旨在帮助学习者掌握构建网页布局的各种技术和策略。以下是关于CSS布局的一些关键知识点： 1. 盒模型：理解CSS盒模型是布局的基础，它包括元素的content...
conceptual-html-css-flex:2021 年 7 月 17 日举行的概念会议资料库
07-24
总结来说，"conceptual-html-css-flex:2021 年 7 月 17 日举行的概念会议资料库"提供了关于HTML、CSS Flex布局以及设计工具Figma的深入学习材料。通过探索和实践这些资源，开发者能够提升自己的前端开发技能，更好地...
web html 网页css 设计参照小米主页的登陆页面
11-19
web html 网页 设计参照小米主页的登陆页面 运用了CSS
小米官网源代码
06-11
小米官网源代码
HTML小米商城代码 注册 登入
10-22
小米商城首页 登入 注册 代码
CSS-Flex：Klases Darbas
03-02
【CSS Flex布局详解】 在网页设计中，CSS Flex布局（Flexible Box Layout）是一种强大的工具，用于处理复杂的网页布局问题。Flex布局提供了一种更灵活、响应式的方式来组织内容，无论内容的数量还是尺寸如何变化，...
html-css-spotifyweb：esercizio boolean
02-26
在"html-css-spotifyweb"项目中，我们可能会用到诸如`display`属性来决定元素的显示方式（如`block`、`inline-block`或`flex`），`position`属性来设置元素的定位（如`relative`、`absolute`或`fixed`），以及`grid`...
html 盒子模型 本章大纲
小步教程
08-28 34
1）盒子模型的值：14个值，17个属性；2）工具1：查看盒子模型。开发者工具查看各属性具体数值，查看相应颜色；3）工具2：QQ截图工具测试尺寸；4）设值情况：多方向统一设值；多方向分别设值；一次设置多个方向值；5）宽高为什么有时设置无效；6）如何让宽高设置从内容的宽高变成总的宽度；7）盒子模型的运用场景；8）养成研究习惯：搞清楚每一个像素的空白从哪里来。
尚硅谷html+css小米官网
k
07-09 893
小米商城
小米登录的HTML源代码,html--登录页面（小米登录）
weixin_39850150的博客
06-03 5177
## 小米登录页面制作>#### 最终呈现效果![](https://box.kancloud.cn/1503e1a89387ff2ffb00b7a138747b15_446x543.png)> #### html代码```账号登录|扫码登录注册小米账号|忘记密码?其他方式登录```>#### css代码```/* ----------元素位置布局---------- */* {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值