css://body高度要撑开html,body{ min-height: 100%; height: 100vh;}//父级.box-fix{ min-height: 100%; display: flex; justify-content: space-between;}子级.main-left{ width: 210px; flex: 0 0 ...
首先得保证 双方的 父 盒子 是
flex
的
<div ref="
flex
Container" class="
flex
-container">
<div class="column"></div>
<div class="column"></div>
.
flex
-container {
display:
flex
;
padding: 10px;
.column {
通过margin 和padding实现
父盒子设置溢出隐藏
子盒子 设置元素为float , 设置margin-bottom 为-2000px (为负值，此时父元素不撑开) 设置padding-bottom 的值为2000px，相抵，当改盒子的里面东西添加时候，父盒子就会撑开，同时，所有的子盒子溢出的部分也会显示，出现等
高
效果
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"&
1、justify-content: space-evenly;
2、justify-content: space-between; 和伪类
3、子元素 margin: 0 auto; margin-left: 0; 第一个子元素margin-left: auto;
<!DOCTYPE html>
<meta charset=
问题：一般页面
布局
的时候我们遇到很多需要左边图片与右边文字
自适应
但是不同等
高
的情况，很头疼，其实 用
flex
布局
一句话就能搞定了
align-self: stretch;:该弹性项被拉伸以适应容器
高度
， 其所使用的值是使项目的外边框（margin box）的垂直尺寸尽可能接近和行相同的尺寸，并依然遵循min-height/min-width/max-height/max-width属性的限制。
//html
<div class="new_item">
没有设置
高度
的子元素与父元素
高度
一致。
1，如果父元素设置固定
高度
，则子元素中没有设置
高度
的元素将继承父元素的
高度
；
2，如果父元素没有设置
高度
，其
高度
由最
高
的子元素决定。
代码中可以将.father的
高度
注释一下对比。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
