H5 display:flex使本元素的height无效

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 display:flex使本元素的height无效相关的知识，希望对你有一定的参考价值。

初学者学习H5时遇到关于display:flex的问题，其中
CSS部分代码：
html,bodyheight:100%;
bodydisplay:flex;flex-direction: column;
/*header*/
header
display:flex;
height:3.67rem;
background:red;
justify-content: center;
align-items: center;

header span
width:5rem;
height:2rem;
background: #64d985;
line-height: 2rem;
color:#fff;
text-align: center;
display:block;

结构部分代码：
<body>
<header>
<span>实时</span>
<span>焦点</span>
</header>
</body>
结果编译出来时header的高度显示为0，当把display:flex注释掉时，高度才会出现，但是两者应该不存在冲突，请问是哪地方出现了问题？请大神解答一下，谢谢

参考技术A 弹性布局：是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。让一个盒子具有弹性布局的属性，要先给其加上样式display:flex；OK我们也会看到有写的是display:box/display:flexbox；其实他们只是不同时期的规范：新规范：2013年最新版本规范的语法即display:flex/inline-flex;中间版本：2011年非官方规范的语法即display:flexbox/inline-flexbox;老规范：2009年规范的语法即display:box/inline-/box;带inline-的容器渲染为行内元素，没带的为块级元素可以看到flex近几年几种不同的写法，相应的也带来很多兼容性问题，所以在开发过程中我们要兼顾所有版本！参考技术B 运行正常啊，header有高度

css display:flex 属性

一：display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二：flex的六个属性

flex-direction 容器内元素的排列方向(默认横向排列)
1：flex-direction:row; 沿水平主轴让元素从左向右排列

1536039075.png

2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

1536039314(1).png

3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列

1536039460(1).png
flex-wrap 容器内元素的换行(默认不换行)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
justify-content 元素在主轴（页面）上的排列
1：justify-content : center;元素在主轴（页面）上居中排列

1536041764(1).png

2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列

1536041631(1).png

3：justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列

1536042053(1).png

4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列

1536042390(1).png

5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

1536042636(1).png
align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。

1536043107(1).png

2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

1536043238(1).png

3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

1536043373(1).png

4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。（靠上对齐）
align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

#main 
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;

#main div 
  width: 70px;
  height: 70px;