flex布局详解以及案例展示

最新推荐文章于 2024-08-16 17:16:00 发布

程序媛-静儿

最新推荐文章于 2024-08-16 17:16:00 发布

阅读量545

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_36711388/article/details/109244934

版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了Flex布局的概念及使用，强调其在响应式设计中的重要性。介绍了Flex布局的主要属性，如flex-direction、flex-wrap、justify-content、align-items和align-content，并通过两个实战案例——圣杯图和长表单布局，展示了Flex布局的实际应用。

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

flex
用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
更加符合响应式设计的特点。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}
<!-- 行内元素也可以使用 Flex 布局。-->
.box{
  display: inline-flex;
}
<!-- Webkit 内核的浏览器，必须加上-webkit前缀。-->
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。在这里插入图片描述

flex-direction：子元素在父元素盒子中的排列方式

属性值	作用
row	默认值，按从左到右的顺序显示
row-reverse	与row相同，但是以相反的顺序
column	灵活的项目将垂直显示，按从上到下的顺序显示
column-reverse	与column，但是以相反的顺序

在这里插入图片描述

flex-wrap：子元素在父元素盒子中是否换行(列)

属性值	作用
nowrap	默认值，不换行或者不换列
wrap	换行或者换列
wrap-reverse	换行活换列，但以相反的顺序

在这里插入图片描述

justify-content：用来在存在的剩余空间时，设置为间距方式

属性值	作用
flex-start	默认值，从左到右，挨着行的开头
flex-end	从左到右，挨着行的结尾
center	居中显示
space-between	平均分布在该行上，两边不留间隔空间
space-around	平均分布在该行上，两边留有一半的间隔空间

在这里插入图片描述

align-items:设置每个flex元素在交叉轴上的默认对齐方式

属性值	作用
flex-start	位于容器的开头
flex-end	位于容器的结尾
center	居中显示
baseline	项目的第一行文字的基线对齐
stretch	默认值,如果项目未设置高度或设为auto，将占满整个容器的高度

在这里插入图片描述

align-content：设置每个flex元素在交叉轴上的默认整体对齐方式

属性值	作用
flex-start	位于容器的开头
flex-end	位于容器的结尾
center	位于容器的中心
space-between	之间留有空白
space-around	两端都留有空白
stretch	默认值,如果项目未设置高度或设为auto，将占满整个容器的高度

在这里插入图片描述

其他属性

属性值	作用
flex-basis	设置弹性盒子伸缩基准值
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的缩小比率
flex	flex-grow,flex-shrink,flex-basis的缩写

<style>
	#div0 {
		width:400px;
		height:500px;
		background-color:violet;
	}
	#div0 div{
		width:200px;
		height:200px;
		background-color:yellow;
	}
	#div0 div:nth-child(1){
		flex-basis:50px; /* 设置此属性后，width失效 */
		flex-grow:1;
	}
	#div0 div:nth-child(2){
		flex-basis:100px;
		flex-grow:4;
	}
	/* 剩余宽度：400-50-100=250  
		flex-grow分了五份，250/5=50
		div:nth-child(1)宽度50+50=100
		div:nth-child(2)宽度100+200=300
	*/
</style>

案例1：圣杯图写法
在这里插入图片描述

<div class="demo">
  <div class="header">头部</div>
  <div class="body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
  </div>
  <div class="footer">底部</div>
</div>
<style>
.demo{
  display: flex;
  flex-direction: column;           
}
.demo div{
  flex: 1;
}
.body{
  display: flex; 
}
.header,.footer,.left,.right{
  flex: 0 0 20%!important;

}
</style>

案例2：长表单布局

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201023172740548.png#pic_center

<form>
	<div id="form">
		<div>
			<label>名称</label>
			<input type="input">
		</div>
		<div>
			<label>	输入密码</label>
			<input type="input" placeholder="请输入密码">
		</div>
	</div>
</form>
<style>
#form{
  display: flex;//再往上一个父级 flex嵌套一层
  flex-direction: column;    //纵向布局  
}
#form div{
  display: flex;
  align-items:flex-start;
  flex:0 0 30px;     //因为是纵向布局，子元素高度30px      
}
#form div label{
  flex: 0 0 100px;
  text-align:right;
}

</style>