flex布局示例_使用flex布局实现如图功能(其中页面背景颜色为“skyblue”, 长高均为300px;-优快云博客

本文详细介绍了CSS Flexbox布局，包括justify-content、align-items、flex-wrap等属性的使用，通过多个实例展示了如何实现元素的灵活布局，如居中、两端对齐、平均分配空间等，适用于前端开发者提升布局技巧。

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

eg:1

在这里插入图片描述

<div class="container">
   <div class="item"> </div>
</div>

.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: center; // 横向居中
  align-items: center; // 垂直居中
}
.item{
  width: 100px;
  height: 100px;
  background-color: blue;
}

eg:2

在这里插入图片描述

<div class="container">
   <div class="item"> </div>
   <div class="item"> </div>
   <div class="item"> </div>
   <div class="item"> </div>
   <div class="item"> </div>
   <div class="item"> </div>
</div>

.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: space-around; // 两端平均分配对齐
  flex-wrap: wrap; // 超出换行
  align-content: space-around; // 垂直平均分配
}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
}

eg:3

在这里插入图片描述

<div class="container">
   <div class="item"> </div>
   <div class="item"> </div>
</div>
.container{
  width: 300px;
  height: 300px; // 垂直是按高度对齐的
  background-color: skyblue;
  display: flex;
  justify-content: space-between; // 两端对齐
}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
}
.container div:nth-of-type(2){
    align-self: flex-end; // 垂直两端对齐
}

eg:4

– 与上一例差不多
在这里插入图片描述

<div class="container">
   <div class="item"> </div>
   <div class="item"> </div>
   <div class="item"> </div>
</div>
.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: space-between;
}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
}
.container div:nth-of-type(2){
    align-self: center;
}
.container div:nth-of-type(3){
  align-self: flex-end;
}

eg:5

在这里插入图片描述

<div class="container">
  <div class="first">
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
   <div class="second">
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
</div>
.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: space-between;

}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  border: 1px solid green;
}
.first,.second{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

eg:6

在这里插入图片描述

<div class="container">
  <div class="first">
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
   <div class="second">
    <div class="item"> </div>
  </div>
    <div class="three">
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
</div>
.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: space-between;

}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  border: 1px solid green;
}
.first,.three{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.second{
  align-self: center;
}

eg:7

在这里插入图片描述

<div class="container">
  <div class="first">
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
   <div class="second">
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
  </div>
</div>
.container{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  display: flex;
  justify-content: space-between; // 两端对齐

}
.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  border: 1px solid green;
}
.first,.second,.three{
  display: flex;
  flex-direction: column; // 垂直对齐
  justify-content: space-between;
}

eg:8

在这里插入图片描述

<div class="container">
  <div class="first">1</div>
   <div class="second">2</div>
   <div class="third">3</div>
</div>
.container{
  width:100%;
  height: 100px;
  background-color: skyblue;
  display: flex;
  justify-content: space-around;
}
.first{
  width:100px; // 直接定义
  background-color: red;
}
.second{
  background-color: orange;
  flex-grow: 1; // 占比
}
.third{
   width:10%;  // 百分比也可以
  background-color: pink;
}

eg:9

在这里插入图片描述

<div class="container">
  <div class="head">1</div>
   <div class="body">
      <div class="body-left">2.1</div>
      <div class="body-center">2.2</div>
   </div>
   <div class="footer">3</div>
</div>
.container{
  height: 100vh;
  background-color: skyblue;
  display: flex;
  flex-direction: column;
}
.head{
   background-color: blue;
  flex-grow: 1; // 高度占比
}
.body{
  display: flex;
  flex-grow: 5;
}
.body-left{
   background-color: green;
  flex-grow: 1; // 横向占比
}
.body-center{
   background-color: pink;
  flex-grow: 5;
}
.footer{
  flex-grow: 1;
   background-color: orange;
}

eg:10

在这里插入图片描述

<div class="container">
  <div class="first">
     <div class="item" style="background: red;">A</div>
     <div class="item" style="background: yellow;">B</div>
     <div class="item" style="background: blue;">C</div>
  </div>
   <div class="second">
      <div class="box">
           <div class="item" style="background: green;">D</div>
           <div class="item" style="background: pink;">E</div>
      </div>
      <div class="bigitem" style="background: orange;">F</div>
  </div>   
</div>
.container{
  height: 100vw;
  width: 100vw;
  background-color: skyblue;
  display: flex;
  flex-direction: column;
  
 }
.item{
  flex: 1;
}

.first{
  display: flex;
  flex: 1;
}
.second{
   display: flex;
   flex: 2;
}
.box{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bigitem{
  flex: 2;
}