flex布局 ——子元素保持自身高度

今天开发遇到一个问题就是: flex布局之后，左右子元素高度不一样的情况下，父元素由比较高的子元素撑起高度，而另一个高度小的子元素则会被自动撑起一样的高度。

解决方法就是：给父元素添加 align-items: flex-start

 <div class="contain ">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
 
.contain {
    display:flex;
    align-items: flex-start;
}
.left {
    width: 100%;
    height: 300px
}
.right {
    width: 100%;
    height: 100px
}复制

标签

flex布局 ——子元素保持自身高度

HTML5 CSS期末大作业：运动体育网站设计主题

JavaScript练习题

VUE移动端项目中，页面限制用户缩放

背景图片实现多图片拼接，并不出现缝隙或重叠

利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页

[HTML]Web前端开发技术28（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

CSS绝对定位（absolute）、相对定位（relative）方法（详解）

CSS基础之高度塌陷的三种解决方案

Vue3 TypeScript 实现自动打字、打字机动画、动画打字工具（TypeIt）

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？

前端哥

jquery输入框添加时间选择器及获取前一个月时间

jQuery事件委托

Django 点击文章内图片展示原始图片大小

jQuery Date() 函数

jQuery实现倒计时效果

使用jQuery渲染数据的小例子

day37_jquery

Javascript知识【jQuery选择器】

jquery ajax 缓存

echarts图的数据过多设置dataZoom属性

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

7
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

8
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

9
尚硅谷css3笔记

2024-02-13 10:02:44998

10
如何利用浏览器测试跨域

2024-02-11 10:02:28998

	<div class="contain ">
	<div class="left">left</div>
	<div class="right">right</div>
	</div>

	.contain {
	display:flex;
	align-items: flex-start;
	}
	.left {
	width: 100%;
	height: 300px
	}
	.right {
	width: 100%;
	height: 100px
	}

flex布局 ——子元素保持自身高度

微信扫一扫：分享