关于flex布局

dae bal

已于 2022-12-08 16:33:52 修改

阅读量435

点赞数

CC 4.0 BY-SA版权

分类专栏：前端遇到的问题之后的解决方法文章标签：前端 java javascript

于 2019-09-10 17:25:12 首次发布

本文链接：https://blog.youkuaiyun.com/baidu_39043816/article/details/100705681

前端同时被 2 个专栏收录

168 篇文章

订阅专栏

遇到的问题之后的解决方法

58 篇文章

订阅专栏

本文深入讲解Flex布局的应用技巧，包括align-item与align-self的区别，如何使用flex实现元素平均分布及换行，解决div宽度固定与铺满剩余空间的问题，以及消除flex-wrap带来的间距等。通过实际案例，帮助读者掌握Flex布局的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于align-item和align-self

flex实现平均分布加换行

一个div宽度/高度固定，另一个div铺满剩余空间（flex: 1;）

消除flex-wrap产生的间距

flex布局设置单个子元素靠右

原址：Flexbox 布局的最简单表单 - 阮一峰的网络日志

关于align-item和align-self

上图中，按钮变高了，输入框也自动变得一样高了！

前面说过，弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。 本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。

align-self属性可以改变这种行为。


input {
  flex-grow: 1;
  align-self: center;
}

align-self属性可以取四个值。

flex-start：顶边对齐，高度不拉伸
flex-end：底边对齐，高度不拉伸
center：居中，高度不拉伸
stretch：默认值，高度自动拉伸

如果项目很多，一个个地设置align-self属性就很麻烦。这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。


form {
  display: flex;
  align-items: center;
}

上面代码中，<form>元素设置了align-items以后，就不用在控件上设置align-self，除非希望两者的值不一样。

flex实现平均分布加换行

	<style type="text/css">
		ul{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			align-content: flex-start;text-align: center;}
		ul li{width: 20%;}
	</style>
	<ul class="unstyle">
		<li>0-3万</li>
		<li>3-5万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
		<li>5-10万</li>
	</ul>

一个div宽度/高度固定，另一个div铺满剩余空间（flex: 1;）

<style>
	.content {
	  width: 500px;
	  height: 500px;
	  background-color: brown;
	  display: flex;
	  flex-direction: column;
	}
	.top {
	  width: 100px;
	  height: 200px;
	  background-color: burlywood;
	}
	.bottom {
	  flex: 1;
	  background-color: cadetblue;
	}
</style>
<div class="content">
	<div class="top">top</div>
	<div class="bottom">bottom</div>
</div>

消除flex-wrap产生的间距

	<style>
		ul{width: 400px;height: 400px;display: flex;flex-flow: column wrap;align-content: flex-start;list-style: none;}
		li{width: 100px;height: 200px;background-color: antiquewhite;}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
</body>