[CSS] Flex layout and Quasar auxiliary class Container

Flex layout and Quasar Flex CSS auxiliary class

Quasar Flex CSS auxiliary classes refer to the Quasar framework that has defined some CSS classes to help us achieve CSS effects. We can use these classes directly on divs without writing CSS styles. If you don’t understand the Quasar framework, you don’t need to pay attention to the relevant code.

Properties that act on Flex containers

Properties that act on the flex container to help the flex container manage child elements within the container.

1. `flex-direction`Spindle alignment direction

The direction is divided into horizontal direction and vertical direction. In the horizontal direction, you can set the left end as the starting point or the right end as the starting point. In the vertical direction, you can set the upper end as the starting point or the lower end as the starting point.

1.1 Original CSS

The attribute values are:

rowThe horizontal starting point is at the left end. Default value
row-reverseThe horizontal starting point is at the right end
columnThe vertical starting point is at the top
column-reverseThe vertical starting point is below

Insert image description here

<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

Note:
The above Quasar Flex CSS auxiliary class flex-directioncontains in addition to properties flex-wrap, this property will be discussed next.

Insert image description here

2.`flex-wrap`

How to wrap the sub-elements in a flex container when they cannot be displayed on one line.

2.1 Original CSS

The attribute values are:

nowrapWithout wrapping, the width or height of the child element will be compressed if it cannot be displayed. default value.
wrapLine wrap, the second line is below the first line
wrap-reverseWrap, the second line is above the first line

<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`

is the abbreviation of flex-directionandflex-wrap

flex-flow: flex-direction flex-wrap;

flex-flow: row wrap;

4.`justify-content`

The alignment of child elements on the main axis. If there is a line break, this effect will also be applied to the second line. Alignment is calculated independently for the first and second rows.

4.1 Raw CSS

The attribute values are:

flex-startLeft aligned, default.
flex-endAlign right
centercenter alignment
space-betweenAlign both ends with equal spacing between items
space-aroundThe spacing between items is equal on both sides, and the spacing between items is twice as large as the spacing between the items and the container border.
space-evenlyaverage score between items

<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>

Insert image description here

After adding styles flex-testto all , we can see the effect when there are multiple lines.flex-test5flex-wrap:wrap;

Insert image description here

4.2 Quasar Flex CSS

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

5.`align-items`

How should child elements be aligned along the cross axis?

5.1 Raw CSS

The attribute values are:

flex-startAlign starting point
flex-endend point alignment
centermidpoint alignment
baselineBaseline alignment based on first line of text
stretchIt only takes effect when the height of the child element is not set or is auto. It covers the entire height of the container. The default value is

<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>

Insert image description here

5.2 Quasar Flex CSS

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

6.`align-content`

The alignment of multiple axes, to put it bluntly, is the alignment of the axes on the cross axis.

6.1 Raw CSS

The attribute values are:

flex-start
flex-end
center
space-between
space-around
stretchThe default axis line covers the entire cross axis

6.2 Quasar Flex CSS

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