flex布局

本文最后更新于：2021年5月29日下午

容器的属性

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;
}

#面试 #css

flex布局

http://yoursite.com/2022/02/24/flex布局/

作者

tatekii

发布于

2022年2月24日

许可协议

es6~now新特性上一篇

HTML面试题下一篇

flex布局

容器的属性

项目的属性

布局实例