flex布局
本文最后更新于:2021年5月29日 下午
ref:阮一峰的网络日志
容器的属性
flex-direction
主轴的方向row(默认住) | row-reverse
横向排列column | column-reverse
纵向排列
flex-wrap
换行nowrap
不换行wrap
换行wrap-reverse
逆序换行
flex-flow
(上述两种的简写)justify-content
主轴上的对齐方式flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-items
侧轴上如何对齐flex-start
:交叉轴的起点对齐flex-end
:交叉轴的终点对齐center
:交叉轴的中点对齐baseline
: 项目的第一行文字的基线对齐stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
align-content
多根轴线的对齐方式flex-start
:与交叉轴的起点对齐flex-end
:与交叉轴的终点对齐center
:与交叉轴的中点对齐space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍stretch
(默认值):轴线占满整个交叉轴
项目的属性
order
项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow
如果存在剩余空间,1放大,0不放大
flex-shrink
如果空间不足,1缩小,0不缩小
flex-basis
基础大小
flex
是上述三种的简写[flex-grow] [flex-shrink] [flex-basis]
align-self
采用与其他兄弟项目不一样的对齐方式,参考
[align-item]
布局实例
圣杯布局
<body> <header style="background-color:burlywood">header</header> <div class="body"> <!-- 按照顺序渲染,如果需提前修改元素order属性,越小越优先 --> <nav style="background-color:chocolate">nav</nav> <main style="background-color:blueviolet">main</main> <aside style="background-color:cadetblue">aside</aside> </div> <footer style="background-color:darkslateblue">footer</footer> </body>
*{ padding:0; margin:0; } body{ display: flex; min-height: 100vh; /* 垂直方向 */ flex-direction: column; } header,footer{ /* 6em 为本身的固定宽度 */ flex: 0 0 6em; } .body{ flex: 1; display: flex; } .body nav,.body aside{ /* 10em 为本身的固定宽度 */ flex: 0 0 10em; } .body main{ flex: 1 }
固定的底栏
*{ padding:0; margin:0; } body{ display: flex; /* 改变flex朝向 */ flex-direction:column; /* 占满视口高度 */ <---------------- min-height:100vh; } header{ height:30px; background: blue; } main{ /* 主题内容填满剩余空间 */ flex:1 } footer{ background:black; }
flex布局
http://yoursite.com/2022/02/24/flex布局/