flex布局实例:把色子放进盒子里

目录

一、flex布局实例:把色子放进盒子里

1、基础样式

二、justify-content 属性

三、flex-direction 属性

四、align-items 属性

五、flex-wrap 属性

二、flex布局应用到常见场景


非常详细的讲解flex布局,看一看,练一练!

一、色子场景示例

核心知识点:display: flex将容器变为弹性容器,内部元素(色子)变为弹性项目,遵循 flex 布局规则。
假设我们有一个盒子(容器)和1- 6 个色子(项目),每个色子代表一个 flex 项目。如果不了解flex布局,请先阅读  Flex弹性布局


1、基础样式

制作色子布局的基础样式,以下实例都需要用到如下样式:

<style>
/* 主容器:使用Flex布局排列6个色子面 */
  .dice-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  }

  /* 每个色子面的基本样式 */
  .dice {
    display: flex;
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
  }

  /* 点的样式 */
  .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
  }
</style>
二、justify-content 属性

 以下是css样式和html代码

 .justify-start-example {
    justify-content: flex-start;
  }
<div class="dice justify-start-example">
    <div class="dot"></div>
</div>

以下是css样式和html代码

.justify-end-example {
    justify-content: flex-end;
  }
    <div class="dice justify-end-example">
            <div class="dot"></div>
    </div>

以下是css样式和html代码

.justify-center-example {
    justify-content: center;
  }
<div class="dice justify-center-example">
        <div class="dot"></div>
      </div>

以下是css样式和html代码

.justify-space-between-example {
    justify-content: space-between;
  }
<div class="dice justify-space-between-example">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>

 

 以下是css样式和html代码

 .justify-space-around-example {
    justify-content: space-around;
  }
<div class="dice justify-space-around-example">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>

 

 以下是css样式和html代码

.justify-space-evenly-example {
    justify-content: space-evenly;
  }
<div class="dice justify-space-evenly-example">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
三、flex-direction 属性

以下是css样式和html代码

.flex-direction-row {
    flex-direction: row;
  }
<div class="dice flex-direction-row">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>

以下是css样式和html代码

.flex-direction-column {
    flex-direction: column;
  }
<div class="dice flex-direction-column">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>

 

以下是css样式和html代码

.flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
<div class="dice flex-direction-row-reverse">
        <div class="dot white textcenter">1</div>
        <div class="dot white textcenter">2</div>
      </div>

 

以下是css样式和html代码

.flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
<div class="dice flex-direction-column-reverse">
        <div class="dot white textcenter">1</div>
        <div class="dot white textcenter">2</div>
      </div>

 

四、align-items 属性

以下是css样式和html代码

.align-items-flex-start {
    align-items: flex-start;
  }
<div class="dice align-items-flex-start">
        <div class="dot"></div>
      </div>

 

以下是css样式和html代码

.align-items-flex-end {
    align-items: flex-end;
  }
<div class="dice align-items-flex-end">
        <div class="dot"></div>
      </div>

 

以下是css样式和html代码

.align-items-center {
    align-items: center;
  }
<div class="dice align-items-center">
        <div class="dot"></div>
      </div>

 

以下是css样式和html代码

.align-items-baseline {
    align-items: baseline;
  }
<div class="dice align-items-baseline">
        <div style="background-color: aquamarine; padding: 5px; font-size: 12px;">1</div>
        <div style="background-color: aquamarine; padding: 5px; font-size: 28px;">2</div>
        <div style="background-color: aquamarine; padding: 5px; font-size: 18px;">3</div>
      </div>

 

以下是css样式和html代码

.align-items-stretch {
    align-items: stretch;
  }
<div class="dice align-items-stretch">
        <div style="background-color: aquamarine; padding: 5px; color:#000">1</div>
        <div style="background-color: aquamarine; padding: 5px; color:#000">2</div>
      </div>

 

五、flex-wrap 属性

以下是css样式和html代码

.flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
<div class="dice flex-wrap-nowrap">
        <div class="dot white textcenter">1</div>
        <div class="dot white textcenter">2</div>
        <div class="dot white textcenter">3</div>
        <div class="dot white textcenter">4</div>
        <div class="dot white textcenter">5</div>
        <div class="dot white textcenter">6</div>
      </div>

以下是css样式和html代码

.flex-wrap-wrap {
    flex-wrap: wrap;
  }
<div class="dice  flex-wrap-wrap">
        <div class="dot white textcenter">1</div>
        <div class="dot white textcenter">2</div>
        <div class="dot white textcenter">3</div>
        <div class="dot white textcenter">4</div>
        <div class="dot white textcenter">5</div>
        <div class="dot white textcenter">6</div>
        <div class="dot white textcenter">7</div>
        <div class="dot white textcenter">8</div>
      </div>

 

以下是css样式和html代码 

.flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
<div class="dice flex-wrap-wrap-reverse">
        <div class="dot white textcenter">1</div>
        <div class="dot white textcenter">2</div>
        <div class="dot white textcenter">3</div>
        <div class="dot white textcenter">4</div>
        <div class="dot white textcenter">5</div>
        <div class="dot white textcenter">6</div>
        <div class="dot white textcenter">7</div>
        <div class="dot white textcenter">8</div>
      </div>

 

二、flex布局应用到常见场景

.dice.one {
    justify-content: center;
    align-items: center;
  }

 /* 两点:对角 */
  .dice.two {
    justify-content: space-between;
  }
  .dice.two .dot:nth-child(2) {
    align-self: flex-end;
  }

 

/* 三点:对角 */
  .dice.three {
    justify-content: space-between;
  }
  .dice.three .dot:nth-child(2) {
    align-self: center;
  }
  .dice.three .dot:nth-child(3) {
    align-self: flex-end;
  }

 

/* 四点:2x2网格 */
  .dice.four {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
  .dice.four .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }

 

/* 五点:4角+中心 */
  .dice.five {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
  .dice.five .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }
  .dice.five .column:nth-child(2) {
    justify-content: center;
  }

 

/* 六点:3x2网格 */
  .dice.six {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
  .dice.six .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }

实例结合理论【 flex布局基础知识 】一定能做的很好!小伙伴们动手练习起来吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哎呦你好

感谢大佬,你真好!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值