css-flex布局

YogaMiller

已于 2023-12-13 00:18:21 修改

阅读量718

点赞数

文章标签： css html 前端

于 2022-08-09 23:04:39 首次发布

本文链接：https://blog.csdn.net/YogaMiller/article/details/126256302

版权

flex 应该是最常用的布局了

想写一个左边(内容撑开)右边自适应的布局不知道啥影响的, 右边不会自适应, 没办法, 回来看看flex

flex-basis比width 优先级高, 当然前提是flex 的直接子元素, 而且子元素的空间富裕, 子元素的内容, 没有超出的情况下, 同时设置这两个, flex-basis比width 优先级高, 如果不是, width 还是有用的. 自己写宽度或者覆盖已有样式, 用 flex-basis吧其实用到了flex了, 讨论width 是没有意义的…
min-width > max-width > flex-basis > width
弹性盒的子元素, 尽量不用width 除非需求要求宽度写死.

flex-basis: 50px;

有的子元素宽度小于50, 则变为 50, 有的元素大于50, 则该元素保持不变
它还和高度有关?

display: flex | inline-flex;

子项块状话.(inline-grid/grid => grid inline-block/inline/block => block flow-root => flow-root) 文本节点会转为匿名块级标签(不过还是最好不用这种文本的)
子项浮动失效.
子项也支持 z-index
子项margin不合并. (块级元素,上下margin合并,取大的值…还有子元素的margin挤走父元素, 父元素写border可以解决.)
三个元素的话,justify-content margin: auto; 可以让其居中; margin: 0 auto; margin-left: auto;

flex-xx

flex-direction
flex-basis
flex-wrap: nowrap | wrap | wrap-reverse; img 设置 max-with: 100%; 可以用来避免宽度溢出. 因为实际上img的( div>div>img)

.container{
	flex-flow: row-reverse wrap-reverse;  flex-direction flex-wrap的合写; 单写一个也是支持的; 也没有书写顺序
}
word-break: break-all;

justify-content 主轴对齐

space-around 和 space-evenly 的区别在于, evenly是完全等分空白区域.

align-items侧轴对齐

stretch 优先级低于 height

align-content 多行的时候生效

stretch | flex-start | flex-end | center | space-xxx

默认情况下, 元素的宽度是不会小于内容宽度的

.box {
	display: flex;
	justify-content: space-between;
	background-color: lightblue;
}
.box > div {
	white-space: nowrap;
	overflow: auto;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 2; 你会发现这个flex-shrink的比例根本没生效
}

.box > div:nth-child(2) {
	flex-grow: 1;
	flex-shrink: 1;
}

flex-shrink: 2;

<style>
	body {
		margin: 0;
	}

	.box {
		display: flex;
		justify-content: space-between;
	}
	.box > div {
		flex-basis: 200px;
		flex-shrink: 2;
		background-color: lightgrey;
	}

	.box > div:nth-child(2) {
		background-color: lightcoral;
		flex-shrink: 1;
	}
</style>
</head>

<body>
	<div class="box">
		<div>1</div>
		<div>2</div>
	</div>
</body>

1 比如两个元素的宽度都是200,总共400 实际宽度只有 250; 减少的这个150(2的减少100, 1的减少50)
在这里插入图片描述

<div class="box">
	<div>1</div>
	<div>2222222222222222222 发打发点阿斯顿发的阿斯顿 阿斯顿发的 打发沃尔夫 阿斯顿发的</div>
</div>

在这里插入图片描述

flex属性: grow shrink basis;顺序变是可以的,但是第一个纯数字的是grow

basis 给一个基础值, grow shrink 设置放大缩小, 及其比例.

默认值是空值; === inital === 0 1 auto
1 => 1 1 0% 这个最常用, 强制让子元素强制均分… + over-flow:auto;
100px => 1 1 100px 目的是为了符合开发的需求;
0 => 0 0 0%
auto => 1 1 auto 有弹性
none => 0 0 auto 推荐没弹性很友善,很直观,语义化,

不要设置width, 设置flex-basis 一个基准的宽度, 然后在控制它放大还是缩小.
.box{
	flex-grow: 0;  grow 优先级更高. 放大和缩小要一致. 
	flex-shrink: 1; // 因为默认值是缩小, 所以设置width不管用
	flex-basis: auto; 基础值
}

<style>
.box {
	display: flex;

	background-color: lightblue;
}
.box > div:nth-child(1) {
	flex: 2 1 0;
}
.box > div {
	min-width: 100px;
	flex: 1 1 0;
}
</style>
<div class="box">
	<div>11111111111111111111111111111111</div>
	<div>222222222222222222222222222222222222222222222222</div>
</div>

flex-direction: row; // 默认 row 一行上....column

columns

设置列的, 非flex相关

ul {
	width: 200px;
	columns: 2;
	background: lightgreen;
}

<ul>
	<li>啊啊1</li>
	<li>啊啊2</li>
	<li>啊啊3</li>
	<li>啊啊4</li>
</ul>