1. IT分享知识网首页
  2. 未分类

felx布局

老牧童 • • 未分类

felx布局本文详细介绍了 Flex 布局的基本原理和关键属性 包括 flex direction 用于设置主轴方向 justify content 定义项目在主轴上的排列方式 align items 控制侧轴上的子元素对齐 以及 flex w

大家好，欢迎来到IT知识分享网。

1.felx布局原理

2.felx布局

     1.主轴与侧轴

      2.属性值

3.justify-count设置主轴的子元素排列方式

      属性值：

           1.flex-start

             2.flex-end

              3.center

               4.spaace-around

               5.space-between

              6.space-evenly

4.align-items侧轴上的子元素排列（单行）

                1.flex-start

                 2.flex-end

                  3.center

                  4.stretch 

3.justify-content 属性定义了项目（子元素）在主轴上的排列方式

4. align-items侧轴上的子元素排列（单行）

felx-wrap设置子元素是否要换行               

                    1.nowrap

                   2.wrap

6.align-contet设置侧轴上子元素的排序方式

              1.flex-star

              2.flex-end

               3.center

                4.space-around

                5.space-between

                 6.stretch

                  7.space-evenly    

7.align-content和alignitems区别

8.flex-flow   

1. felx布局原理

       flex布局的元素，称为Flex容器（flex container），简称“容器”。

       它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

       开启弹性布局后所有的项目会在同一行显示,项目宽度不足，会自动收缩。

       子容器可以横向排列也可以纵向排列。

        项目也可以开启弹性布局。
 

<!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>Document</title>
  <style>
    .container {
      display: flex;
      width: 800px;
      height: 800px;
      background-color: skyblue;
    }
 
    .item {
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: pink;
    }
  </style>
</head>
 
<body>
  <div class="container">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
 
</body>
 
</html>

felx布局

2.flex-direction设置主轴的方向

      2.1主轴与侧轴

      2.2属性值 

           1.flex-direction:row

section ul { display: flex; flex-direction: row; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; }

felx布局

      2. flex-direction:column

section ul { display: flex; flex-direction: column; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; }

felx布局

 3. flex-dirrection:row-reverse调整主轴方向（默认为水平方向）

复制代码 section ul { display: flex; flex-direction: row-reverse; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; }

felx布局

  4.flex-direction:column-reverse

section ul { display: flex; flex-direction: column-reverse; } section li { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 10px; background-color: pink; list-style:none; }

felx布局

3.justify-content 属性定义了项目（子元素）在主轴上的排列方式

<style> div{ display: flex; width: 88%; height: 500px; background-color: skyblue; /* 默认选项 justify-content: flex-start; */ justify-content: flex-start; /* 让项目（子元素）在盒子中向最后对齐 顺序不会变123还是123 justify-content: flex-end; */ /* justify-content: flex-end; */ /* 让项目（子元素）在盒子中居中对齐 中间无缝隙 justify-content: center; */ /* justify-content: center; */ /* 平分盒子 俩边靠边 justify-content: space-between; */ /* justify-content: space-between; */ /* 平分剩余空间 两边不靠边 */ /* justify-content: space-around; */ } div span{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div>

 3.1 flex-stat 默认值 从头部开始 如果主轴是x轴 则从左到右felx布局

3.2 flex-end 从尾部开始排列

felx布局

  3.3 justify-content: ccenter 在主轴居中对齐 如果主轴是x轴 则水平居中

      felx布局

 3.4 justify-content: space-between; 平分剩余空间

felx布局

3.5 space-between 先两边贴边 在平分剩余空间 …重要

  • felx布局

 3.6 justify-count: space-evenly  均匀排列每个元素,每个元素之间的间隔相等

div#main { display: flex; justify-content:space-evenly; }

 felx布局

4. align-items侧轴上的子元素排列（单行）

      1.align-items的属性值：

属性值 含义
flex-start 子元素贴着侧轴的头部排列（默认值）
flex-end 子元素贴着侧轴的尾部排列
center 子元素在侧轴上居中对齐
stretch 拉伸，使得子元素在侧轴方向上与父元素等大

   2. align-items :flex-start

<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; align-items: flex-start; /*默认值*/ } div span{ width: 200px; height: 100px; background: skyblue; } </style>

 执行结果 :子元素贴着侧轴的头部排列（顶端对齐）

felx布局

  2. align-items:flex-end

 <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; align-items: flex-end; } div span{ width: 200px; height: 100px; background: skyblue; } </style>

 执行结果：子元素贴着侧轴的尾部排列（底端对齐）

felx布局

 3.align-items:center

<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; align-items: center; } div span{ width: 200px; height: 100px; background: skyblue; } </style>

 执行结果：子元素在侧轴上居中对齐

felx布局

 4.align-items:stret

<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; align-items: stretch; } div span{ width: 200px; /*height: 100px;*/ background: skyblue; } </style>

 在使用stretch属性值时，不要给子元素高度/宽度（侧轴为y轴时不给高度，侧轴为x轴时不给宽度），否则在侧轴方向上将没有拉伸效果

 <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; align-items: stretch; } div span{ width: 200px; height: 100px; background: skyblue; } </style>

 执行结果：因为给子元素span设置了高度为100px，故在侧轴上实现不了拉伸效果

felx布局

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

flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素宽度放到父元素里。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex-wrap</title>
		<style>
			div{
				/* 给父级添加flex属性 */
				display: flex;
				width: 600px;
				height: 400px;
				background-color: aqua;
				/* flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素宽度放到父元素里。 */	
				/* flex-wrap: nowrap; */
				flex-wrap: wrap;
			}
			div span{
				width: 150px;
				height: 100px;
				background-color: pink;
				color: red;
				margin: 10px;		
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>3</span>
			<span>3</span>
		</div>
	</body>
</html>

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

 6.align-content

align-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式
注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效

align-content的属性值：

属性值 含义
flex-start 子元素在侧轴的头部开始排列 （默认值）
flex-end 子元素在侧轴的尾部开始排列
center 子元素在侧轴上居中显示
space-around 子元素在侧轴上平分剩余空间
space-between 子元素线贴着侧轴的两边，再平分剩余空间
stretch 设置子元素高度，平分父元素高度

align-content:flex-start

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; /* 有了换行,故侧轴上的排列方式用align-content */ align-content: flex-start; } div span{ width: 150px; height: 100px; background: skyblue; margin: 10px; } </style>

 运行结果：子元素从侧轴的头部开始排列

felx布局

 align-content:flex-end

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; align-content: flex-end; } div span{ width: 150px; height: 100px; background: skyblue; margin: 10px; } </style>

 运行结果：子元素从侧轴的尾部开始排列

felx布局

 align-content:center (居中对齐)

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; align-content: center; } div span{ width: 150px; height: 100px; background: skyblue; margin: 10px; } </style>

 运行结果：子元素在侧轴上居中对齐

 在这里插入图片描述

 align-content:space-around(平分剩余空间)

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; align-content: space-around; } div span{ width: 150px; height: 100px; background: skyblue; margin: 10px; } </style>

运行结果：

felx布局

 align-content:space-beween (贴着侧轴的两边，再平分侧轴上的剩余空间)

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; align-content: space-between; } div span{ width: 150px; height: 100px; background: skyblue; margin: 10px; } </style>

 运行结果：

felx布局

 align-content:stretch(除去子元素所占高度，再平分父元素高度)

<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <style type="text/css"> div{ display: flex; width: 800px; height: 400px; background-color: orange; flex-wrap: wrap; align-content: stretch; } div span{ width: 150px; height: 50px; background: skyblue; margin: 0 10px; } </style>

 运行结果：

felx布局

 7.align-content和alignitems区别   

        1：共同点：它们对齐方向为交叉轴

        2：不同点：align-content 应用于为 多行   而 align-items:应用于单行。

8.flex-flow

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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110377.html

赞 (0)
老牧童老牧童
0
上一篇 2026-02-01 07:16
下一篇 2026-02-01 07:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信