CSS3-flex布局

小小姜鸭

已于 2024-03-13 15:36:01 修改

阅读量1k

点赞数 20

文章标签： css3 前端 css

于 2024-03-13 15:34:28 首次发布

本文链接：https://blog.csdn.net/qq_44791442/article/details/136662578

版权

一、传统布局与flex对比

1.1 传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

1.2 flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

1.3 建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

二、flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
lex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三、 flex布局常见属性

3.1 以下6个属性是对父元素设置的：

flex-direction：设置主轴的方向
flex-wrap：是否换行
justify-content：主轴上子元素排列方式
align-items：侧轴上子元素排列方式（单行）
align-content：侧轴上子元素排列方式（多行）
flex-flow：flex-direction和flex-wrap的复合属性

3.2 flex-direction设置主轴的方向

3.2.1主轴与侧轴

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下
默认图示：
主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

3.2.2 属性值

flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

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

相关代码以及截图如下：
1）只设置display:flex,相当于设置了flex-direction:row

<!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>flex主轴</title>
  <style>
    div{
      display: flex;
      width: 600px;
      height: 400px;
      background-color: cornflowerblue;
    }
    div span{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
</html>

在这里插入图片描述
2)flex-direction:row-reverse

3)flex-direction:column

4)flex-direction:column-reverse

3.3 justify-content 设置主轴上子元素的排列方式

注意：在使用这个属性前，确定主轴是哪个

属性值	说明
flex-start	默认值从头部开始，如果主轴是X轴，则从左至右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果是X轴，则水平居中对齐）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

以下案例只针对主轴为X轴情况
1）justify-content:flex-start
在这里插入图片描述
2)justify-content:flex-end

3)justify-content:center

4）justify-content:space-around

5)justify-content:space-between

3.4 flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称‘轴线’）上，flex-warp属性定义，flex布局中默认是不换行的

属性值	说明
nowarp	默认不换行
wrap	换行

1）flex-wrap:nowrap
相关部分代码如下：

<style>
    div{
      display: flex;
      justify-content: space-between;
      width: 400px;
      height: 400px;
      background-color: cornflowerblue;
    }
    div span{
      width: 120px;
      height: 100px;
      background-color: pink;
    }
</style>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>

浏览器效果图：
在这里插入图片描述
2）flex-wrap:wrap:

3.5 align-items侧轴上的排列方式（单行）

该属性设置子项在侧轴上的排列方式，在子项为单项时使用

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	垂直居中
fstretch	拉伸

以下案例默认主轴为X轴：
1）align-items:flex-start
在这里插入图片描述
2)align-items:flex-end

3)align-items:center

4)align-items:stretch,子元素高度不设置

3.6 align-content侧轴上的排列方式（多行）

该属性设置子项在侧轴上的排列方式，在子项为单项时使用

属性值	说明
flex-start	默认值从头部开始排列
flex-end	从尾部开始排列
center	在侧轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

以下案例只针对设置有flex-wrap:wrap情况
1）align-content:flex-start
在这里插入图片描述
2)align-content:flex-end;

3)align-content:center

4)align-content:space-around

5)align-content:space-between

6)allign-content:stretch
在这里插入图片描述

3.7 flex-flow属性

flex-flow属性是flex-direction和flex-wrap属性的复合属性
比如：

flex-grow:row wrap;

四、 flex布局子项常见属性

3.1 常见属性

flex属性
align-self属性
order

3.2 flex属性定义子项分配剩余空间，用flex来表示占多少份

flex是flex-grow,flex-shrink,flex-basic三个属性的简写形式，默认值是flex：0 1 auto
1）flex-grow属性可以按比例分配剩余空间
2）flex-shrink属性指定了flex元素的收缩规则
3）flex-basic定义了该元素的空间大小，该属性默认值是auto，若设置了width，则flex-basic为width，flex-basic具有比width更高的优先级

.item{
	flex:<number> ; /* defalut:0 */
}

案例：

<head>
	<style>
    	div{
      		display: flex;
     		align-content: space-between;
      		/* align-content: stretch; */
      		width: 500px;
      		height: 400px;
     		 background-color: cornflowerblue;
   		 }
    	div span:nth-child(1){
     	 	width: 120px;
     		 background-color: blueviolet;
  		 }
    	div span:nth-child(2){
      		width: 120px;
      		height: 100px;
     		background-color: pink;
     	 	flex:1
   		 }
   		div span:nth-child(3){
     		 background-color: aqua;
      		 width: 120px;
	   	 }
  	</style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

结果：粉色2分配剩余空间
在这里插入图片描述

3.3 align-self 某一个子项在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

 div span:nth-child(3){
      width: 120px;
      align-self: flex-end;
    }

结果：
在这里插入图片描述

3.4 order 子项排列顺序

数值越小，排列越靠前，默认为0。