首页 前端知识 css高度自适应-flex弹性布局

css高度自适应-flex弹性布局

2024-05-28 09:05:14 前端知识 前端哥 299 608 我要收藏

写网页遇到页面高度无法自适应,查阅了资料学到了下列方式:

<div id="container">
	<div class="header"></div>
	<div class="middle"></div>
	<div class="footer"></div>
</div>

css主要部分:

#container{
	display:flex;
	min-height:100%;
	flex-direction: column;
}
.middle{
	flex:1;
}

关于flex布局部分知识:

  1. flex-direction

flex-direction 属性用来决定主轴的方向(即项目的排列方向),属性的可选值如下:
row:默认值,主轴沿水平方向从左到右
row-reverse: 主轴沿水平方向从右到左
column: 主轴沿垂直方向从上到下
column-reverse: 主轴沿垂直方向从下到上
initiai: 将此属性设置为属性的默认值
inherit: 从父元素继承此属性的值

  1. flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素(项目)超出父容器时是否换行,属性的可选值如下:
nowrap 默认值,表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行,但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

  1. flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写,语法格式如下:
flex-flow: flex-direction flex-wrap;

  1. justify-content

justify-content 属性用于设置弹性盒子中元素在主轴(横轴)方向上的对齐方式,属性的可选值如下:
flex-start 默认值,左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

  1. align-items

align-items 属性用来设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:
stretch 默认值,项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

  1. align-content

align-content 属性与 justify-content 属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式,属性的可选值如下:
stretch 默认值,将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9869.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!