flex弹性布局入门

最新推荐文章于 2023-09-25 17:34:20 发布

weixin_44852386

最新推荐文章于 2023-09-25 17:34:20 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44852386/article/details/108564126

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习完了flex布局，觉得很有用，然后就写了这么一篇博客来做个总结。（提前说明一下，我是跟随b站上某位很出名老师的指导完成的学习，可能有同学和我学习了同样的内容。）

flex布局是非常实用的一种前端布局，在不少主流前端语言都有出现，今天我们主要以HTML为案例。

一、基础代码展示和效果体验
1.下面将是我们页面的基础代码，所有的改变将以本代码为基础，添加的绝大部分改变可添加入style标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
   <div>
       <span>1</span>
       <span>2</span>
       <span>3</span>
   </div>
</body>
</html>

2.代码体验
1）有无display:flex对比

<style>
	div {
	   display: flex;
	   width: 80%;
	   height: 300px;
	   background-color: pink;
	}
	div span {
	   width: 150px;
	   height: 100px;
	   background-color:purple;
	   margin-right: 5px;
	}
</style>

效果展示：
1、flex布局基本演示

2、去掉display:flex代码效果

2）平均分三等分
其余代码不变，将style中部分代码代替

div span {
  height: 100px;
  background-color:purple;
  margin-right: 5px;
  flex: 1;
}

效果展示：三等分

flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
，任何一个容器都可以指定为flex布局
当父元素设为flex布局后，子元素的float,clear和vertical-align属性失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

上述代码中div是flex父容器，span是子容器，子容器可横向排列也可纵向排列。

二、flex布局父项属性

属性	作用
flex-direction	设置主轴方向
justify-content	设置主轴上子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素排列方式（多行）
align-items	设置侧轴上子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

1.flex-direction
主轴和侧轴:默认主轴x轴方向，水平向右；默认侧轴y轴方向，水平向下
元素跟着主轴排列

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

2.justify-content

属性值	说明
flex-start	默认值从头部开始如果主轴是≯轴,则从左刳右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是×轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间(重要)

justiify-content
横向space-between排列：

<style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            justify-content: space-between;
        }
        div span {
            height: 100px;
            width: 150px;
            background-color:purple;
            margin-right: 5px;
        }
    </style>

横向space-between
纵向space-between

<style>
div {
   display: flex;
   width: 80%;
   height: 500px;
   background-color: pink;
   flex-direction: column;
   justify-content: space-between;
}
div span {
   height: 100px;
   width: 150px;
   background-color:purple;
   margin-right: 5px;
}
<style>

纵向space-between

3.flex-wrap设置子元素是否换行
flex布局中默认不换行，内部元素缩小

属性值	说明
nowrap	默认值,不换行
wrap	换行

4.align-items设置侧轴上子元素排列方式（单行）

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸

1)居中对齐：

<style>
div {
   display: flex;
   width: 600px;
   height: 400px;
   background-color: pink;
   flex-wrap: wrap;
   justify-content:center;
   align-items: center;
}
div span {
   height: 100px;
   width: 150px;
   background-color:purple;
   color: #ffffff;
   margin: 10px;
}
<style>

在这里插入图片描述
2)改变方向为纵向

flex-direction: column;

在这里插入图片描述

3)侧轴拉伸，子盒子不给高度

<style>
 div {
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    flex-wrap: wrap;
    justify-content:center;
    align-items: stretch;
}
div span {
     /* height: 100px; */
    width: 150px;
    background-color:purple;
    color: #ffffff;
    margin: 10px;
}

</style>

在这里插入图片描述

5.align-content设置侧轴上子元素排列方式
用于子项出现换行的情况，单行下无效果

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头,再平分剩余空间
stretch	设置子项元素高度平分父元素高度

align-content和align-items区别

align- items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
align- content适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
单行:align-items,多行:align-content

6.flex-flow属性是flex-direction和flex-wrap复合属性

flex-flow: column wrap;

三、flex布局子项常见属性
flex子项目占得份数，定义子项目分配剩余空间，用flex表示占得份数

<style>
 section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2){
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        </style>
        
     <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

在这里插入图片描述

<style>
 p span{
    flex: 1;
 }

 p span:nth-child(2){
    flex: 2;
    background-color: purple;
 }
</style>   


<p>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</p>

在这里插入图片描述

align-self控制子项自己在侧轴排列顺序

<style>
  div {
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
  }

  div span{
      width: 150px;
      height: 100px;
      background-color: purple;
      margin-right: 5px;
  }

  div span:nth-child(3){
      align-self: flex-end;
  }
</style>

在这里插入图片描述

order属性定义子项排列顺序（前后顺序）
数值越小，排名越靠前

<style>
	div span:nth-child(2){
       order: -1;
    }
</style>

在这里插入图片描述

weixin_44852386

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局入门

学习完了flex布局，觉得很有用，然后就写了这么一篇博客来做个总结。（提前说明一下，我是跟随b站上某位很出名老师的指导完成的学习，可能有同学和我学习了同样的内容。）flex布局是非常实用的一种前端布局，在不少主流前端语言都有出现，今天我们主要以HTML为案例。一、基础代码展示和效果体验1.下面将是我们页面的基础代码，所有的改变将以本代码为基础，添加的绝大部分改变可添加入style标签中。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫