超详细的flex的常用属性、属性值!!

9.13学习

一、flex是什么?

flex是CSS3中引入的一种布局模式,也称为弹性布局。使用flex布局可以快速、灵活地实现各种复杂的布局。

在css中有三种盒子,标准盒子、IE盒子(怪异盒子)。他们的差异在于计算盒子的尺寸时的差异。
盒子描述属性值
标准盒子在设置内边距或有边框的情况自身的盒子会撑大box-sizing: content-box;
ie盒子(怪异盒子)在设置内边距或有边框的情况自身的盒子不会撑大(但是在内容超出了自身内容的情况下会撑大)box-sizing: border-box;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 300px;
				height: 200px;
				background-color: pink;
				/* box-sizing: content-box; */
			}
    		.box2 {
				width: 300px;
				height: 200px;
                padding: 50px;
				background-color: orange;
				/* box-sizing: border-box; */
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

在这里插入图片描述

可以看到box2把自身的内容缩小了,但盒子自身的大小不变。

flex布局基于容器和子元素两个概念。如图

在这里插入图片描述

以下是具体代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.boss {
				width: 600px;
				height: 200px;
				border: 1px solid red;
				display: flex;
			}
			.boxx1 {
				width: 100px;
				height: 100px;
				background-color: pink;
				flex: 2;
			}
			.boxx2 {
				width: 100px;
				height: 100px;
				background-color: orange;
				flex: 8;
			}
			.boxx3 {
				width: 100px;
				height: 100px;
				background-color: green;
				flex: 2;
			}
		</style>
	</head>
	<body style="height: 2000px;">
        <div class="boss">
			<div class="boxx1">1111111</div>
			<div class="boxx2">2222222</div>
			<div class="boxx3">3333333</div>
		</div>
    </body>
</html>

其中父元素必须设置display: flex;。然后子元素设置flex。可以看到boxx1和boxx3都设置了2等份,boxx2设置了8等份,最大为12等份。

二、flex的属性。

属性描述几个常用属性值
flex-direction属性指定了弹性子元素在父容器中的位置 4个属性值
justify-content设置主轴(x轴)上的对齐方式 5个属性值
align-items设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式(并齐)5个属性值
flex-wrap是一个用于设置交叉轴(y轴)方向上的对齐方式的属性(换行) 3个属性值
align-content是一个用于控制多行项目在交叉轴(y轴)方向上对齐方式的属性(用于修改 flex-wrap 属性的行为) 6个属性值
flex-flowflex-direction和flex-wrap的复合属性(可同时控制主轴和交叉轴方向上的布局方式)2个属性值
order弹性子元素,排序,用整数值来定义排列顺序,数值小的排在最前面,可以 为负值,属性设置弹性容器内弹性子元素属性属性值为数字
align-self是一个用于控制单个 flex 项目在交叉轴上的对齐方式的属性(在子容器中使用)5个属性值

1.flex-direction属性。

以下的属性都在父级上使用,需要在子元素使用的话我会特别标注。

  • row
    默认值,从左往右默认的排序。
    在这里插入图片描述

  • row-reverse
    与 row 相同,但是以相反的顺序。
    在这里插入图片描述

  • column
    灵活的项目将垂直显示,正如一个列一样。
    在这里插入图片描述

  • column-reverse
    与 column 相同,但是以相反的顺序。
    在这里插入图片描述
    以下是这些属性使用的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style>
#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction: column-reverse;
    }
    .box1{
      width: 50px;
        height: 50px;
    }
    .box2{
      width: 50px;
        height: 50px;
    }
   .box3{
      width: 50px;
        height: 50px;
    }
    .box4{
      width: 50px;
        height: 50px;
    }
   .box5{
      width: 50px;
        height: 50px;
    }
</style>
</head>
<body>

  <div id="main">
    <div class="box2" style="background-color:coral;">A</div>
    <div class="box3" style="background-color:lightblue;">B</div>
    <div class="box4" style="background-color:khaki;">C</div>
    <div class="box5" style="background-color:pink;">D</div>
    <div class="box1" style="background-color:lightgrey;">E</div>
  </div>
</body>
</html>

2.justify-content属性(x对齐方式)。

  • flex-start
    默认值。从行首起始位置开始排列。
    在这里插入图片描述
  • flex-end
    从行尾位置开始排列。
    在这里插入图片描述
  • center
    居中排列。
    在这里插入图片描述
  • space-between
    均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点。
    在这里插入图片描述
  • space-around
    均匀排列每个元素,每个元素周围分配相同的空间。(a和c的最外边加起来等于ab中间的位置)
    在这里插入图片描述

3.align-items属性(y对齐方式)。

  • flex-start
    和上面一样,也属于默认值。默认排序。
  • flex-end
    以y轴在底部对齐。
    在这里插入图片描述
  • center
    以y轴在中间对齐
    在这里插入图片描述
  • baseline
    如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
    (类似于默认)
  • stretch
    如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。(类似于默认个人理解)

4.flex-wrap(换行)

  • nowrap
    默认值,弹性容器为单行,默认显示在一行。

  • wrap
    弹性盒子为多行,该情况下子项多出的溢出的部分会被放置在新行。子项会生断行。
    在这里插入图片描述

  • wrap-reverse
    反转wrap排列。
    在这里插入图片描述

5.align-content(用于修改flex-wrap属性的行为。

  • flex-start
    从弹性盒子的起始位置开始堆叠。
    在这里插入图片描述
  • flex-end
    各行向弹性盒容器的结束位置堆叠。
    在这里插入图片描述
  • center
    各行弹性盒子的中间开始堆叠。
    在这里插入图片描述
  • space-around
    均匀排列每个元素,每个元素周围分配相同的空间(两边的间距加起来等于每个元素中间的间距)
    在这里插入图片描述
  • space-between
    各行在弹性盒容器中平均分布。
    在这里插入图片描述
  • stretch
    默认值。各行将会伸展以占用剩余的空间。

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

  • flex-flow
    属性用于设置或检索弹性盒模型对象的子元素排列方式。
  • flex-direction
    属性规定灵活项目的方向。
  • flex-wrap
    属性规定灵活项目是否拆行或拆列。

7.order(用于子元素)

  •  order 弹性子元素,排序,用整数值来定义排列顺序,数值小的排在最前面,
     可以 为负值,属性设置弹性容器内弹性子元素属性
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style>
#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    }
    .box1{
      width: 50px;
        height: 50px;
        order: 5;
    }
    .box2{
      width: 50px; 
        height: 50px;
        order: 4;
    }
   .box3{
      width: 50px;
        height: 50px;
        order: 3;
    }
    .box4{
      width: 50px;
        height: 50px;
        order: 2;
    }
   .box5{
      width: 50px;
        height: 50px;
        order: 1;
    }
    /* #main div{
      width: 50px;
        height: 50px;
    } */
</style>
</head>
<body>

  <div id="main">
    <div class="box1" style="background-color:lightgrey;">A</div>
    <div class="box2" style="background-color:coral;">B</div>
    <div class="box3" style="background-color:lightblue;">C</div>
    <div class="box4" style="background-color:khaki;">D</div>
    <div class="box5" style="background-color:pink;">E</div>
  </div>
</body>
</html>

在这里插入图片描述
order数值最小的排前面。

8.align-self(对齐方式,在子元素上使用)

  • auto
    默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
  • flex-start
    弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    在这里插入图片描述
  • flex-end
    弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    在这里插入图片描述
  • center
    弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    在这里插入图片描述
  • baseline
    如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
  • stretch
    如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。

三、总结

以上就是我今天的笔记总和,谢谢你的观看!

  • 打卡9.17

在这里插入图片描述

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值