Flex布局

IDENTITY182

于 2023-08-24 21:25:53 发布

阅读量25

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_68613594/article/details/132470483

版权

html布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是Flex？

Flex（Flexible Box）是CSS3中的一种布局模型，用于创建灵活的盒子布局。它允许容器中的子元素自动调整大小和位置，以适应不同的屏幕尺寸和设备。

二、Flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。采用flex布局的元素称为容器， flex布局中的子元素称为项目

三、布局父项常用属性

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

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

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

实例：

<!DOCTYPE html>
<html4 lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style>
  .box{
    width: 500px;
    height: 500px;
    background-color: pink;
    margin:100px auto;
    display:flex;
    /* 默认是row */
    flex-direction:row ;  
  }
  .b1{
    width: 100px;
    height: 100px;
    background-color: purple;
  }
  .b2{
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .b3{
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .b4{
    width: 100px;
    height: 100px;
    background-color: rgb(37, 192, 40);
  }
</style>
  <body>
    <div class="box">
      <div class="b1"></div>
      <div class="b2"></div>
      <div class="b3"></div>
      <div class="b4"></div>
    </div>
  </body>
  </html>

效果图：沿着主轴方向排开在这里插入图片描述

如果是 flex-direction: column;效果将是这样。
在这里插入图片描述

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

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

（1）justify-content：flex-start；（当前主轴方向为X轴）
在这里插入图片描述
（2）justify-content：flex-end；（当前主轴方向为X轴）

（3）justify-content：center；（当前主轴方向为X轴）
在这里插入图片描述
（4）justify-content：space-around；（当前主轴方向为X轴）

（5）justify-content：space-between；（当前主轴方向为X轴）

3. flex-wrap：设置子元素是否换行
默认情况下，项目都排在一条线上（轴线），flex-wrap属性定义，flex布局默认是不换行的。
属性值：nowrap:不换行 wrap:换行

在这里插入图片描述

display: flex;
justify-content: center;
/*!* 默认子元素不换行，如果装不开，会缩小元素的宽度，放到父元素里面 *!*/
flex-wrap: wrap;

在这里插入图片描述
4.align-items：设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

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

（1）align-items：flex-start；
在这里插入图片描述
（2）align-items：center；

在这里插入图片描述

（3）align-items：flex-end；
在这里插入图片描述

（4）align-items：stretch；
此项属性要去掉height的影响。
在这里插入图片描述
5.align-content：设置侧轴上的子元素排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），单行的情况下是无效的。

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

7. flex-flow：复和属性，相当于同时设置了flex-direction和flex-wrap

在这里插入图片描述
8.align-content和align-items的区别

align-items 适用于单行情况下，只有上对齐、下对其、居中和拉伸
align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值.
总结就是单行找align-items多行找align-content

四、子项常用属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序（前后顺序）

1. flex 属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

例：圣杯布局
在这里插入图片描述

section{
				display: flex;
				margin: 0 auto;
				width: 800px;
				height: 150px;
				background-color: pink;
			}
			section div:nth-child(1){
				width: 110px;
				height: 150px;
				background-color: rgb(149, 173, 227);
			}
			section div:nth-child(3){
				width: 110px;
				height: 150px;
				background-color: rgb(52, 229, 111);
			}
			section div:nth-child(2){
				width: 110px;
				height: 150px;
				flex: 1;
				background-color: rgb(228, 25, 25);
			}

2.等分
在这里插入图片描述

section{
				display: flex;
				margin: 0 auto;
				width: 800px;
				height: 150px;
				background-color: pink;
			}
			section div:nth-child(1){
				width: 110px;
        flex: 1;
				height: 150px;
				background-color: rgb(149, 173, 227);
			}
			section div:nth-child(3){
				width: 110px;
				height: 150px;
        flex: 1;
				background-color: rgb(52, 229, 111);
			}
			section div:nth-child(2){
				width: 110px;
				height: 150px;
				flex: 1;
				background-color: rgb(228, 25, 25);
			}

3. align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto。
在这里插入图片描述

section{
				display: flex;
				margin: 0 auto;
				width: 800px;
				height: 450px;
				background-color: pink;
			}
			section div:nth-child(1){
				width: 150px;
				height: 150px;
				background-color: red;
			}
			section div:nth-child(3){
				width: 150px;
				height: 150px;
				align-self: flex-end;
				background-color: blue;
			}
			section div:nth-child(2){
				width: 150px;
				height: 150px;
				background-color: green;
			}

3 order属性定义项目的排列顺序

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

在这里插入图片描述

section div:nth-child(3){
				width: 150px;
				height: 150px;
				/* align-self: flex-end; */
				background-color: blue;
                order: -2;
			}