快速学会Flex布局核心知识

头像
博哥的编程日记
     河南
    阅读 6 分钟
    头图

    ​Author:博哥   Time:2023-01-14​

    该文章对应的视频教程去B站观看视频教程

    去B站观看视频教程

    一.准备工作

    1.1 创建index.html 编写如下代码

    <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>8分钟学会Flex布局</title>  
</head>  
<body>  
   <div class="container">  
     <div class="item item-1"></div>  
     <div class="item item-2"></div>  
     <div class="item item-3"></div>  
   </div>  
</body>  
</html>

    1.2 引入如下初始化样式

    :root{  
  --clr-dark: #0f172a;  
  --clr-light: #f1f5f9;  
  --clr-accent: #e11d48;  
}  
  
*,  
*::before,  
*::after{  
  box-sizing: border-box;  
}  
  
body{  
  margin: 0;  
  padding: 0;  
  line-height: 1.6;  
  word-spacing: 1.4px;  
  font-family: 'Roboto', sans-serif;  
  color: var(--clr-dark);  
  background-color:var( --clr-light) ;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
}  
  
.container{  
   width: 80%;  
   height: 700px;  
   margin: 0 auto;  
   border: 10px solid var(--clr-dark);  
}  
  
.item{  
  width: 150px;  
  height: 150px;  
  background-color: #fb7185;  
  padding: 1em;  
  font-weight: 700;  
  color: var(--clr-light);  
  text-align: center;  
  border: 10px solid var(--clr-accent);  
  border-radius: 10px;  
}

    图片
    二.Flex布局介绍

    2.1 如何对整个container容器采用Flex布局.container{     display: flex;  }效果如下

    图片
    display: flex; 代表对容器采用Flex布局
    注意:采用Flex布局后容器元素默认在一行上排列三.Flex重要属性介绍3.1 flex-direction 属性作用介绍:
    决定了布局容器中元素的主轴方向 布局中元素顺着主轴排列
    row 横向排列 X轴
    colum 纵向排列 Y轴row效果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
    图片
    colum效果

    图片
    3.2 justify-content 属性作用介绍:
    决定了布局容器中元素在主轴方向上 对齐方式
    flex-start 以起始点为参考对齐
    flex-end 以结束点为参考对齐
    center 居中对齐
    space-between
    主轴上的第一个和最后一个元素紧靠主轴起始和结束位置
    对剩余空间的间隔平均分配后对齐
    space-around
    对主轴上元素的剩余空间进行平分
    主轴的起始和结束位置会保留间隔


    flex-start效果

    图片
    flex-end效果

    图片
    center效果

    图片
    space-between
    图片
    space-around效果

    图片
    3.3 align-items属性作用介绍:
    决定了布局容器中元素在测轴方向上 对齐方式
    flex-start 在侧轴上以起始点为参考对齐
    flex-end 在侧轴上以结束点为参考对齐
    center 在侧轴上居中对齐
    baseline 在侧轴上以基线对齐项目
    flex-start效果

    图片
    flex-end效果

    图片
    center效果

    图片
    baseline效果

    .container{   
  display: flex;  
  flex-direction: row;  
  justify-content:flex-start;   
 align-items: baseline;  
}    
.item-1{    font-size: 1.5rem;  }

    图片
    3.4 flex-wrap属性作用介绍:
    主轴上元素过多时，是否需要换行
    wrap 换行显示
    nowrap 不换行 注意当空间不足时元素大小会被挤压
    Html代码

    <!DOCTYPE html> 
<html lang="en"> 
  
  <head>   
    <meta charset="UTF-8">   
    <title>8分钟学会Flex布局</title>   
    <!--引入样式文件-->   
    <link type="text/css" rel="stylesheet" href="css/style.css"> </head> 
  
  <body>   
    <div class="container">     
      <div class="item item-1">1</div>     
      <div class="item item-2">2</div>     
      <div class="item item-3">3</div>     
      <div class="item item-4">4</div>     
      <div class="item item-5">5</div>     
      <div class="item item-6">6</div>     
      <div class="item item-7">7</div>     
      <div class="item item-8">8</div>     
      <div class="item item-9">9</div>     
      <div class="item item-10">10</div>   </div> </body> 
</html>

    wrap效果

    图片
    nowrap效果

    图片
    当元素有多行时候如果需要消除，侧轴的间隔可以将align-items替换为align-content
    对齐方式和之前一样

    图片
    此时如果需要调整间隔可使用 <font color=red>gap</font>

    .container{
     display: flex;
     flex-direction: row;
     justify-content:flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
     gap: 1rem;
}

    图片
    3.5 flex-grow属性作用介绍:
    在主轴上当剩余的空间较多是，可以通过该属性设置，主轴上元素增长空间
    图片
    此时我们可以通过该属性设置让第三个元素占满剩下的所有空间

    <!DOCTYPE html> 
<html lang="en"> 
  
  <head>   
    <meta charset="UTF-8">   
    <title>8分钟学会Flex布局</title>   
    <!--引入样式文件-->   
    <link type="text/css" rel="stylesheet" href="css/style.css"> </head> 
  
  <body>   
    <div class="container">     
      <div class="item item-1">1</div>     
      <div class="item item-2">2</div>     
      <div class="item item-3">3</div>   </div> </body> 
</html>​​.item-3{    flex-grow: 1;  }

    图片
    3.6 flex-shrink属性作用介绍:当屏幕缩小时，元素在主轴缩小效果 0拒绝收缩 默认所有元素都是1的等比压缩 值越大空间不够时压缩的就越小.item-1{   flex-shrink: 5;  }
    图片
    3.6 flex和flex-basis属性作用介绍:
    flex: 按照份数设置元素宽度 1
    flex-basis: 通过设置像素或者百分比 控制元素的宽度3.7 align-self属性作用介绍:
    单独设置主轴上某一个元素，在侧轴的对齐方式.item-1{    align-self: center;  }效果

    图片
    3.7 order属性作用介绍:该值越大，在主轴上元素越靠后

    .item-1{
     order: 10000;
}

    在这里插入图片描述

    csshtml前端
    博哥的编程日记
    1 声望0 粉丝

    热爱生活，热爱编程，热衷于编程技术的分享和交流，努力创出优质内容，帮助更多的志同道合的朋友学习和提升

    « 上一篇
    idea添加注释模板
    下一篇 »
    快速制作响应式的个人主页效果案例

    引用和评论

    推荐阅读
    头像
    HTML+CSS完成毛玻璃发光按钮的制作

    博哥的编程日记阅读 1.4k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.6k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 3.9k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 4阅读 4k

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.2k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.4k

    0 条评论
    得票最新