flex布局（flex容器，flex属性）

最新推荐文章于 2024-02-12 22:19:08 发布

咸鱼one

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45921263/article/details/117403691

版权

文章目录

前言
一、flex（Flexible Box）概述
二、flex容器，flex属性
总结(以图片的形式呈现)

前言

本篇文章中主要归纳flex布局弹性元素的属性和弹性容器的属性，以及使用flex布局制作导航栏。

一、flex（Flexible Box）概述

1.概述：Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
2.1 任何一个容器都可以指定为flex布局。

.box{
	display:flex;
}

2.2 内元素也可以使用Flex布局；

.box{
	display:inline-flex
	}

2.3 webkit内核的浏览器，必须加上webkit前缀。

.box{
	display:webkit-flex;
	display:flex;
}

注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将失效。

二、flex容器，flex属性

1.flexBox弹性模型

采用Flex布局的元素，称为flex容器，简称“容器”。它的子元素自动成为容器成员，称为flex项目，简称“项目”。
在这里插入图片描述

2.基本概念详解

弹性容器：给元素添加display:flex后就是弹性容器。
弹性属性：弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。

注意点：1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。水平的不一定就是主轴。
2.每根轴都是起点和终点，这对于元素的对齐非常重要。
3.弹性元素也可以通过display:flex设置为另一个弹性容器。形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
4.弹性元素的两根轴非常重要，所有属性都是作用于轴的。

3.弹性容器的属性

属性	含义
flex-direction	主轴方向
flex-wrap	换行
flex-flow	flex-direction和flex-wrap合写
justify-content	主轴上的对其方式
align-items	交叉轴上的对齐方式（单行）
align-content	交叉轴上多行/多列对齐方式

flex-direction属性：属性值决定主轴的方向。（弹性元素永远沿主轴排列）

//css设置
.box{
				/* display: -webkit-box; */
		display: flex;
		flex-direction: row;
		width:600px;
		height: 300px;
		background-color: pink;
	}

flex-wrap属性：默认情况下，项目都排在一条线上，此属性的定义，如果一条轴线排不下，如何换行？nowrap:不换行，元素自动压缩，wrap:换行，向下换行，wrap-reverse:换行，向上换行。

.box{
		display: flex;
		flex-direction: row;	
		width:100px;																			       
		height: 300px;
		background-color: pink;
		flex-wrap: wrap-reverse;
	}

3.flex-flow属性：flex-direction属性和flex-wrap属性的简写形式，默认为row，nowrap。

4.justify-content属性：定义了项目在主轴上的对齐方式；默认值为 flex-start。
5.align-items属性：定义项目在交叉轴上如何对齐。默认值是stretch,当元素设置具体尺寸或者auto时会将交叉轴方向撑满（撑满整个容器）。
6.align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也是在交叉轴上如何对齐。

注意：align-items和align-content的区别：（1）两者“作用域不同”；（2）align-content管全局（所有行视为整体）（3）align-items管单行。

在这里插入图片描述

4.弹性元素的属性

属性	描述
order	顺序。数值越小，排列越靠前，默认为0；
flex-grow	放大比例（空间过多时），默认为0，即如果存在剩余空间，也不放大。
flex-shrink	缩小比例（空间过少时）定义了项目的缩小比例，默认为1；即如果空间不足，该项目将缩小；值为0时不缩放
flex-basis	固定尺寸，浏览器根据这个属性，计算主轴是否有多余空间。
flex	flex-grow和flex-shrink和flex-basis合写
align-self	自身的对齐方式，覆盖掉父级的align-items对齐方式

5.圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .demo{
         display: flex;
         flex-direction: column;   
	     text-align: center;
       }
       .demo div{
         flex: 1;
       }
       .body{
         display: flex; 
       } 
       .header,.footer,.left,.right{
         flex: 0 0 20%!important;
       }
	   
	   .header,.footer{
		   background-color: dimgray;
	   }
	   .left{
		   background-color: lightgray;
	   }
	   .center{
		   background-color: greenyellow;
	   }
	   .right{
		   background-color: lightpink;
	   }
	   .left,.center,.right{
		   height: 300px;
	   }
	   .header{
		   height: 100px;
	   }
    </style>
</head>
<body>
   <div class="demo">
      <div class="header">头部</div>
      <div class="body">
         <div class="left">left</div>
         <div class="center">center</div>
         <div class="right">right</div>
      </div>
      <div class="footer">底部</div>
   </div>
</body>
</html>

6.垂直居中对齐

    <style>
        .demo{
          width: 500px;
          height: 300px;
          border: 1px solid purple;
          display: flex;                /*设置为flex布局*/
          justify-content: center;   /*水平居中*/
          align-items: center;     /*垂直居中*/
        }
        .inner{
          width: 160px;
          height: 160px;
          font-size: 26px;
          border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="demo">
      <div class="inner">
        <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
      </div>
    </div>
</body>

总结(以图片的形式呈现)

在这里插入图片描述

图1.主轴方向,换行

在这里插入图片描述

图2.缩放，顺序

在这里插入图片描述

图3.对齐方式

咸鱼one

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
flex布局（flex容器，flex属性）

文章目录前言一、flex（Flexible Box）概述二、flex容器，flex属性1.flexBox弹性模型2.基本概念详解3.弹性容器的属性4.弹性元素的属性5.圣杯布局6.垂直居中对齐总结前言本篇文章中主要归纳flex布局弹性元素的属性和弹性容器的属性，以及使用flex布局制作导航栏。一、flex（Flexible Box）概述1.概述：Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。2.1 任何一个容器都可以指定为flex布局。.box{
复制链接

扫一扫