0
点赞
收藏
分享

微信扫一扫

Elasticsearch 认证模拟题 - 4

吴wuwu 2024-06-02 阅读 27
前端javascripthtml

007 Flex布局相关的样式

flex-basics 相关的样式类

ClassProperties
basis-0flex-basis: 0px;
basis-1flex-basis: 0.25rem; /* 4px */
basis-2flex-basis: 0.5rem; /* 8px */
basis-3flex-basis: 0.75rem; /* 12px */
basis-4flex-basis: 1rem; /* 16px */
basis-5flex-basis: 1.25rem; /* 20px */
basis-6flex-basis: 1.5rem; /* 24px */
basis-7flex-basis: 1.75rem; /* 28px */
basis-8flex-basis: 2rem; /* 32px */
basis-9flex-basis: 2.25rem; /* 36px */
basis-10flex-basis: 2.5rem; /* 40px */
basis-11flex-basis: 2.75rem; /* 44px */
basis-12flex-basis: 3rem; /* 48px */
basis-14flex-basis: 3.5rem; /* 56px */
basis-16flex-basis: 4rem; /* 64px */
basis-20flex-basis: 5rem; /* 80px */
basis-24flex-basis: 6rem; /* 96px */
basis-28flex-basis: 7rem; /* 112px */
basis-32flex-basis: 8rem; /* 128px */
basis-36flex-basis: 9rem; /* 144px */
basis-40flex-basis: 10rem; /* 160px */
basis-44flex-basis: 11rem; /* 176px */
basis-48flex-basis: 12rem; /* 192px */
basis-52flex-basis: 13rem; /* 208px */
basis-56flex-basis: 14rem; /* 224px */
basis-60flex-basis: 15rem; /* 240px */
basis-64flex-basis: 16rem; /* 256px */
basis-72flex-basis: 18rem; /* 288px */
basis-80flex-basis: 20rem; /* 320px */
basis-96flex-basis: 24rem; /* 384px */
basis-autoflex-basis: auto;
basis-pxflex-basis: 1px;
basis-0.5flex-basis: 0.125rem; /* 2px */
basis-1.5flex-basis: 0.375rem; /* 6px */
basis-2.5flex-basis: 0.625rem; /* 10px */
basis-3.5flex-basis: 0.875rem; /* 14px */
basis-1/2flex-basis: 50%;
basis-1/3flex-basis: 33.333333%;
basis-2/3flex-basis: 66.666667%;
basis-1/4flex-basis: 25%;
basis-2/4flex-basis: 50%;
basis-3/4flex-basis: 75%;
basis-1/5flex-basis: 20%;
basis-2/5flex-basis: 40%;
basis-3/5flex-basis: 60%;
basis-4/5flex-basis: 80%;
basis-1/6flex-basis: 16.666667%;
basis-2/6flex-basis: 33.333333%;
basis-3/6flex-basis: 50%;
basis-4/6flex-basis: 66.666667%;
basis-5/6flex-basis: 83.333333%;
basis-1/12flex-basis: 8.333333%;
basis-2/12flex-basis: 16.666667%;
basis-3/12flex-basis: 25%;
basis-4/12flex-basis: 33.333333%;
basis-5/12flex-basis: 41.666667%;
basis-6/12flex-basis: 50%;
basis-7/12flex-basis: 58.333333%;
basis-8/12flex-basis: 66.666667%;
basis-9/12flex-basis: 75%;
basis-10/12flex-basis: 83.333333%;
basis-11/12flex-basis: 91.666667%;
basis-fullflex-basis: 100%;

flex-direction 相关的样式类

lassProperties
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

flex-wrap 相关的样式类

ClassProperties
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-nowrapflex-wrap: nowrap;

flex 相关的样式类

ClassProperties
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

flex-grow 相关的样式类

ClassProperties
growflex-grow: 1;
grow-0flex-grow: 0;

flex-shrink 相关的样式类

ClassProperties
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;

order 相关的样式类

ClassProperties
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;
order-noneorder: 0;

案例1：垂直居中对齐

<script setup>
</script>

<template>
  <!--
   flex：将盒子的布局设置为flex布局
   items-center：元素垂直居中对齐
  -->
  <div class="flex items-center">
    <div class="w-32 h-32 bg-red-300"></div>
    <div>
      <strong>strong加粗的字体</strong>
      <span>span普通的字体</span>
    </div>
  </div>
</template>

<style scoped>
</style>

案例2：行内flex布局

<script setup>
</script>

<template>
  <!--
   inline-flex：将盒子的布局设置为 inline-flex 布局
   items-baseline：元素基线对齐
  -->
  <p>
    正常的文本描述
    <span class="inline-flex items-baseline">
    <div class="self-center w-5 h-5 rounded-full mx-1 bg-red-300"/>
    <span>张大鹏</span>
  </span>
    正常的文本描述。。。
  </p>
</template>

<style scoped>
</style>

案例3：控制flex元素占据的宽度

<template>
  <div class="flex flex-row gap-3">
    <div class="basis-1/4 bg-purple-500">01</div>
    <div class="basis-1/4 bg-purple-500">02</div>
    <div class="basis-1/2 bg-purple-500">03</div>
  </div>
</template>

案例4：flex-row-reverse 控制一行反序显示

<template>
  <div class="flex flex-row-reverse gap-3 w-32 p-3 bg-emerald-200">
    <div class="bg-purple-500">01</div>
    <div class="bg-purple-500">02</div>
    <div class="bg-purple-500">03</div>
  </div>
</template>

案例5：flex-col 控制一列显示

<template>
  <div class="flex flex-col gap-3 w-32 p-3 bg-emerald-200">
    <div class="bg-purple-500">01</div>
    <div class="bg-purple-500">02</div>
    <div class="bg-purple-500">03</div>
  </div>
</template>

案例6：flex-col-reverse 控制一列反序显示

<template>
  <div class="flex flex-col-reverse gap-3 w-32 p-3 bg-emerald-200">
    <div class="bg-purple-500">01</div>
    <div class="bg-purple-500">02</div>
    <div class="bg-purple-500">03</div>
  </div>
</template>

案例7：flex-wrap 控制换行

<template>
  <div class="flex flex-wrap gap-3 w-32 p-3 bg-emerald-200">
    <div class="w-10 bg-purple-500">01</div>
    <div class="w-10 bg-purple-500">02</div>
    <div class="w-10 bg-purple-500">03</div>
  </div>
</template>

案例8：flex-wrap-reverse 控制换行并反序

<template>
  <div class="flex flex-wrap-reverse gap-3 w-32 p-3 bg-emerald-200">
    <div class="w-10 bg-purple-500">01</div>
    <div class="w-10 bg-purple-500">02</div>
    <div class="w-10 bg-purple-500">03</div>
  </div>
</template>

案例9：使用 order 控制显示顺序

<template>
  <div class="flex flex-wrap gap-3 w-32 p-3 bg-emerald-200">
    <div class="w-10 bg-purple-500 order-last">01</div>
    <div class="w-10 bg-purple-500">02</div>
    <div class="w-10 bg-purple-500">03</div>
  </div>
</template>
举报

相关推荐

Elasticsearch 认证模拟题 - 1

运维架构自动化架构设计云原生

Elasticsearch 认证模拟题 - 15

perl

gaussdb hccdp认证模拟题（判断）

windowsqt开发语言

FCRP模拟题

数据分析

CSP-J复赛 模拟题4

python开发语言

大唐杯模拟题

算法决策树机器学习

图论 BFS 模拟题

后端LeetCode图论i++扁平化编程语言

hodj 1008 Elevator (模拟题)

hdoj1008#include赋值ios编程语言

Mad Scientist （纯模拟题）

#include#define#pragma编程语言

HDU 1008 Elevator（模拟题）

HDU1008Elevator模拟题#include编程语言
0 条评论