flex布局

最新推荐文章于 2023-03-14 20:24:34 发布

原创最新推荐文章于 2023-03-14 20:24:34 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #布局

学习同时被 3 个专栏收录

47 篇文章

订阅专栏

知识点

45 篇文章

订阅专栏

get

44 篇文章

订阅专栏

博客围绕Flex布局展开，介绍了HTML和CSS代码实现的圣杯布局，在小屏幕下三栏会垂直叠加。还详细阐述了Flex布局的多个属性，如justify - content、align - items、align - content等，以及排序、放大缩小比例等相关设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="box">
  <span class="item"></span>
</div>

css
.box {
  display: flex;
  justify-content: center;  // mian 轴  x
  align-items: center;      //cross 轴  y
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

.box {
  display: flex;
}
.item:nth-child(2) {
  align-self: center;
}
.item:nth-child(3) {
  align-self: flex-end;
}

HTML代码如下。


<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

CSS代码如下。


.box {
  display: flex;
  flex-wrap: wrap;
}
.row{
  flex-basis: 100%;
  display:flex;
}
.row:nth-child(2){
  justify-content: center;
}
.row:nth-child(3){
  justify-content: space-between;
}

圣杯布局

HTML代码如下。

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码如下。


.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header,
footer {
  flex: 1;//相当于flex：1 1 1; 放大属性 缩小属性 项目长度
}
.HolyGrail-body {
  display: flex;
  flex: 1;
}
.HolyGrail-content {
  flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}
.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。


@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

justify-content: center; // mian 轴 x