关于css:快速学会Flex布局核心知识

44次阅读

共计 3266 个字符，预计需要花费 9 分钟才能阅读完成。

Author: 博哥 Time:2023-01-14

去 B 站观看视频教程

<!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>

: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 属性作用介绍: 该值越大，在主轴上元素越靠后