【CSS】Flex布局及Quasar辅助类之Container

Flex布局及Quasar Flex CSS辅助类

Quasar Flex CSS 辅助类指的是Quasar框架已经定义了一些CSS类，帮助我们实现了CSS效果，我们可以在div上直接使用这些类即可，不用再写CSS样式了。不了解Quasar框架可以不用关注相关代码。

作用在Flex容器上的属性

作用在flex容器上的属性，帮助flex容器管理容器内的子元素。

1.`flex-direction` 主轴对齐方向

方向分为水平方向和垂直方向，在水平方向上可以设置左端为起点或者右端为起点，在垂直方向上可以设置为上端为起点或下端为起点。

1.1 原始CSS

属性值为：

row 水平方向起点在左端默认值
row-reverse 水平方向起点在右端
column 垂直方向起点在上方
column-reverse 垂直方向起点在下方

在这里插入图片描述

<template>
  <p>原始CSS样式 row</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 row-reverse</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  flex-direction: row;
}

.flex-test1 {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

.flex-test {
  display: flex;
  flex-direction: column;
}

.flex-test1 {
  display: flex;
  flex-direction: column-reverse;
}

1.2 Quasar Flex CSS

row
row inline
column
column inline
row reverse
column reverse

注意：
以上的Quasar Flex CSS辅助类除了包含flex-direction属性外还包含flex-wrap，这个属性接下来会讲到。

在这里插入图片描述

2.`flex-wrap`

当flex容器内的子元素一行显示不下时，应该如何换行。

2.1 原始CSS

属性值为：

nowrap 不换行，如果显示不下会压缩子元素的宽度或高度。默认值。
wrap 换行，第二行在第一行下面
wrap-reverse 换行，第二行在第一行上面

<template>

  <p>原始CSS样式 nowrap</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 wrap</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
<p>原始CSS样式 wrap-reverse</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  flex-wrap: nowrap;
}

.flex-test1 {
  display: flex;
  flex-wrap: wrap;
}
.flex-test2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

2.2 Quasar Flex CSS

wrap
no-wrap
reverse-wrap

3.`flex-flow`

是flex-direction和flex-wrap的简写形式

flex-flow: flex-direction flex-wrap;

扫描二维码关注公众号，回复： 17055690 查看本文章

flex-flow: row wrap;

4.`justify-content`

子元素在主轴的对齐方式。如果要是有换行，这个效果也会作用到第二行上。第一行与第二行独立计算对齐方式。

4.1 原始CSS

属性值为：

flex-start 左对齐，默认值。
flex-end 右对齐
center 居中对齐
space-between 两端对齐，项目之间间隔相等
space-around 项目两侧间隔相等，项目之间的间隔与项目与容器边框的间隔大一倍
space-evenly 项目间隔平均分

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-between</p>
  <div class="root flex-test3">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-around</p>
  <div class="root flex-test4">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-evenly</p>
  <div class="root flex-test5">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  justify-content: flex-start;
}

.flex-test1 {
  display: flex;
  justify-content: flex-end;
}

.flex-test2 {
  display: flex;
   justify-content: center;
}
.flex-test3 {
  display: flex;
   justify-content: space-between;
}
.flex-test4 {
  display: flex;
   justify-content: space-around;
}
.flex-test5 {
  display: flex;
   justify-content: space-evenly;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

在这里插入图片描述

将flex-test到flex-test5都加flex-wrap:wrap;样式后，我们可以看到多行时的效果。

在这里插入图片描述

4.2 Quasar Flex CSS

justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly

5.`align-items`

子元素在交叉轴方向上应该如何对齐

5.1 原始CSS

属性值为：

flex-start 起点对齐
flex-end 终点对齐
center 中点对齐
baseline 基于第一行文字的基线对齐
stretch 子元素未设置高度或者为auto时才生效，沾满整个容器高度，默认值

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
<p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 baseline</p>
  <div class="root flex-test3">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 stretch</p>
  <div class="root flex-test4">
    <div class="item2">1</div>
    <div class="item2">2</div>
    <div class="item2">3</div>
    <div class="item2">4</div>
    <div class="item2">5</div>
  </div>
</template>


<style>
.root {
  height: 80px;
  border: solid 1px #faccdd;
  margin: 5px;
}

.flex-test {
  display: flex;
  align-items: flex-start;
}

.flex-test1 {
  display: flex;
  align-items: flex-end;
}

.flex-test2 {
  display: flex;
   align-items: center;
}

.flex-test3 {
  display: flex;
  align-items: baseline;
}

.flex-test4 {
  display: flex;
 align-items: stretch;
}

.flex-test5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item1 {
  background-color: #adffcc;
  width: 50px;
  height: 50px;
  margin: 5px;
}
.item2 {
  background-color: #adffcc;
  width: 50px;
  margin: 5px;
}
</style>

在这里插入图片描述

5.2 Quasar Flex CSS

items-start
items-end
items-center
items-stretch
items-baseline

6.`align-content`

多根轴线对齐方式，说白了就是轴线在交叉轴上的对齐方式。

6.1 原始CSS

属性值为：

flex-start
flex-end
center
space-between
space-around
stretch 默认值轴线沾满整个交叉轴

6.2 Quasar Flex CSS

content-start
content-end
content-center
content-stretch
content-between
content-around