flex布局方法学习

恒二哥

已于 2022-11-02 17:25:28 修改

阅读量564

点赞数 3

分类专栏：前端文章标签： css html css3

于 2022-11-02 17:18:03 首次发布

本文链接：https://blog.csdn.net/zch981964/article/details/127654453

版权

前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

目录
基本概念
常用属性
justify-content
align-items
总结

基本概念
flex 是 flexible box 的缩写，意思为 “弹性盒子”
任何一个 html 元素，都可以指定为 display:flex 完成弹性布局

容器和项目
容器 (flex container)：需要添加弹性布局的父元素，被设置为 display:flex 属性的元素
项目 ( flex item)：弹性布局容器中的每一个子元素

两个基本方向
主轴 (flex direction)： flex item 可以纵向排列，也可以横向排列 (主轴默认水平)
交叉轴： 与主轴垂直的另一方向，称为交叉轴

flex 布局的本质是给父盒子添加 display:flex 属性，来控制子盒子的位置和排列方式

注意: 当父元素设置为 display: flex 之后，子元素的 float，clear，vertical-align 都会失效
在这里插入图片描述
常用属性
justify-content
设置主轴上的子元素排列方式 (使用之前一定要确定好主轴是哪个方向)

属性取值

取值描述
flex-start 默认值，项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器中央
space-between 项目在行与行之间留有间隔
space-around 项目在行之前、行之间、行之后留有间隔

举例：

<body>
    <div id="d1">
        <span>1.花花</span>
        <span>2.大大</span>
        <span>3.小小</span>
    </div>
</body>

未指定 justify-content 时
(默认按照从左到右的方向布局)

<style>
    #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        display: flex;
} 
       
    #d1>span{
         background-color: yellow;
        width: 60px;
        height: 100px;
} 
       
</style>

在这里插入图片描述

设置 justify-content: flex-end
(此时元素都排列到右侧了)

<style>
    #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        display: flex;
        justify-content: flex-end;
} 
        
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;
} 
       
</style>

在这里插入图片描述
设置 jutify-content: center
(此时元素居中排列)

<style>
    #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        justify-content: center;
  } 
        
    
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;
  } 
        
</style>

在这里插入图片描述
设置 justify-content: space-between
(先两边元素贴近边缘, 再平分剩余空间)

<style>
    #d1{
    width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        justify-content: space-between;
    } 
        
    
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;
} 
    
</style>

在这里插入图片描述

设置 justify-content: space-around
(平分剩余空间)

<style>
    #d1{
       width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        justify-content: space-around;
   } 
     
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px; 
  } 
         
</style>

在这里插入图片描述

align-items
设置侧轴上的元素排列方式
在 justify-content: 中，我们是让元素按照主轴的方向排列，我们也可以指定元素按照侧轴方向排列

属性取值

取值描述
stretch 默认值，行拉伸以占据剩余空间
center 朝着弹性容器中央对行打包
flex-start 朝着弹性容器开头对行打包
flex-end 朝着弹性容器结尾对行打包
space-between 行均匀分布在弹性容器中
space-around 行均匀分布在弹性容器中，两端各占一半

align-items 只能针对单行元素来实现，如果有多行元素，就需要使用 item-contents

stretch
这个是 align-content 的默认值，意思是如果子元素没有被显式指定高度，那么就会填充满父元素的
高度

举例:

<div id="d1">
    <span>1.花花</span>
    <span>2.大大</span>
    <span>3.小小</span>
</div>

center

<style>
     #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        align-items: center;
   } 
      
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;
  }   
</style>

在这里插入图片描述

flex-start

<style>
     #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        align-items: flex-start;
  } 
     
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;  
} 
    
</style>

在这里插入图片描述

flex-end :交叉轴的终点对齐。

<style>
     #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        align-items: flex-end;
      }  
       
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px; 
    } 
        
</style>

在这里插入图片描述

**center: 交叉轴的中点对齐。
举例:

<style>
     #d1 {
       width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        align-items: center;
     }
       
    #d1>span{
      background-color: yellow;
        width: 60px;
        height: 100px;  
    } 
</style>

在这里插入图片描述

baseline：项目的第一行文字的基线对齐。
举例:

<style>
     #d1{
        width: 100%;
        height: 200px;
        background-color: thistle;
        /* 父级元素设置弹性布局 */
        display: flex;
        align-items: baseline;
     } 
    
    #d1>span{
        background-color: yellow;
        width: 60px;
        height: 100px;
    }   
</style>

在这里插入图片描述

总结
① 给父容器添加display: flex/inline-flex 属性，使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；
② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
③ display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
④ 设为 flex布局后，子元素的float、clear和vertical-align属性将失效；但是position属性，依然生效

恒二哥

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
flex布局方法学习

① 给父容器添加display: flex/inline-flex 属性，使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；当父元素设置为 display: flex 之后，子元素的 float，clear，vertical-align 都会失效。② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；容器添加弹性布局后，显示为行级元素；：需要添加弹性布局的父元素，被设置为 display:flex 属性的元素。容器添加弹性布局后，显示为块级元素；
复制链接

扫一扫