flex 学习笔记

LL1018。

已于 2022-10-31 10:11:48 修改

阅读量425

点赞数

文章标签： html 前端

于 2022-10-26 14:31:03 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52704461/article/details/127504023

版权

1：flex基本概念

flex分为两部分，轴和容器。轴：主轴，交叉轴。容器：子容器，父容器。

轴：主轴的方向是从左向右的，交叉轴垂直于主轴，逆时针方向90度

2：flex-direction

交叉轴是由主轴决定的，主轴又是由flex-direction决定的。

flex-direction属性设置在父容器上，这样子才可以生效。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

 <div class="container">
        <div class="item" style="background-color: skyblue;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: pink;">3</div>
    </div>

案例1 ：flex-direction: row 主轴沿着水平方向向右

案例2 ：flex-direction: row-reverse

案例3：flex-direction:column

案例4：flex-direction:column-reverse

容器

父容器

justify-content: 设置子元素在主轴方向上的对齐方式
align-items： 设置子元素在交叉轴方向上的对齐方式

1： justify-content

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)

flex-end 靠着main-end对齐//参考常见术语(一般是右方向)

center 靠着主轴居中对齐//一般就是居中对齐

space-between 两端对齐，靠着容器壁，剩余空间平分

space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配

space-evenly 平均对齐，不靠着容器壁，剩余空间平分

案例1： justify-content: flex-start;

案例2 justify-content: flex-end;

案例:3：justify-content: center;

案例 4：justify-content：space-between

案例五： justify-content: space-around;

案例六： justify-content: space-around;

align-items

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

justify-conent，align-items，align-content 都极度相似

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch (每一行)伸缩，占满整个高度

<!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 {
			width: 300px;
			height: 300px;
			margin: 0 auto;
			background-color: #ccc;
			/* 容器属性 --设置给父元素  */
			/* 开启弹性盒布局  */
			/* 弹性元素沿主轴方向排列 */
			display: flex;
			/* 开启换行 使用多行对齐方式的前提条件 */
			flex-wrap: wrap;
			/* 设置多行对齐 */
			/* align-content: stretch; */
			/* 取值：flex-start | flex-end | center | baseline | stretch(默认) */
			/* 用于控制项目在交叉轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器， */

			/* flex-start ，center，flex-end 与align-items属性表现一致： */
			/* align-content: center; */

			/* space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。 */
			/* align-content: space-around; */

			/* space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器 */
			align-content: space-evenly;

		}

		/* 设置子元素的样式 */
		.container div {
			width: 60px;
			/* height: 50px; */
			color: white;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="div1" style="background-color: red;">
			弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
		<div class="div1" style="background-color: red;">
			弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
		<div class="div1" style="background-color: red;">
			弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
		<div class="div1" style="background-color: red;">
			弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
	</div>
</body>

</html>

order元素

控制元素排列顺序值越小越靠前 order默认是0

.div1{
			/* 控制元素排列顺序 值越小越靠前 order默认是0 */
			order: 3;
		}
		.div2{
			order: 2;
		}
		.div3{
			order: 1;
		}

	<div class="container">
		<div class="div1" style="background-color: red;">
			弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
	</div>