introduce

This is about Flex layout practice, originally want to introduce some words to introduce Flex related attributes, think or forget, Ruan Yifeng big two articles push:

  1. Flex Layout Tutorial: Syntax section
  2. Flex Layout Tutorial: Sample article

How to use CSS to improve your understanding of Flex:

  1. CSS: checkbox+label+selector
  2. CSS hover+active

The conventional layout

1. Two-column layout

Left fixed width, right adaptive:

Source code, online view

<Layout-Layout
  :background-color="bgColor"
  class="flex-layout"
>
  <div class="flex__item">left</div>
  <div class="flex__item">right</div>
</Layout-Layout>
Copy the code
.flex-layout
  display flex
.flex__item
  &:nth-child(1)
    background-color #c04851/ / red jadeflex 0 0 200px
  &:nth-child(2)
    background-color #440e25/ / bronze purpleflex 1 1 auto 
Copy the code

Reasons explained:

Flex is a shorthand property used to set flex-grow, flex-shrink, and flex-basis. The flex container has a default property value of align-items: Stretch, which will either help you or make you feel bad.

2. Three-column layout

The holy Grail layout and the Twin wings layout are both three-column layouts. The key of the Holy Grail layout is to set the padding of the parent element, and then the child element through the margin negative value and positioning. The key to the twin-wing layout is to add more children in the middle column and set margin, and then use margin negative values in the sidebar. Using Flex is much simpler:

Source code, online view

<Layout-Layout
  :background-color="bgColor"
  class="holy-grail"
>
  <div class="flex__content">content</div>
  <div class="flex__nav">nav</div>
  <div class="flex__side">side</div>
</Layout-Layout>
Copy the code
.holy-grail
  display flex
  .flex__content
    flex 1 1 auto
    background-color # 009999
  .flex__nav..flex__side
    flex 0 0 120px
  .flex__nav
    order -1
    background-color #1D7373
  .flex__side
    background-color #33CCCC
Copy the code

Reasons explained:

The middle column is the core, so rendering takes precedence, and the DOM structure comes first, mainly using the Order attribute to put the nav in front.

Common layout

In addition to using these layouts for the overall structure, simple layouts are often required for some components.

1. The navigation bar

Examples of imitation:

Implementation effect picture:

Source code, online view

<header class="header">
  <div class="header__avatar"></div>
  <div class="header__title">Title</div>
  <div class="header__more"></div>
</header>
Copy the code
Display flex align-items center > * margin 0 10px width 100% background-color #f9f1db display flex align-items center > * margin 0 10px &__avatar, &__more flex 0 0 80px height 80px border-radius 50% &__avatar background-color #FFAC40 &__title color #FF9000 &__more margin-left auto background-color #A65E00Copy the code

Reasons explained:

Margin-auto is used to occupy the remaining space, just as we used margin: 0 auto to get horizontal center.

2. Input box

Examples of imitation:

Implementation effect picture:

Source code, online view

<Layout-Layout
  align-center
  justify-center
  :background-color="bgColor"
>
  <div class="input-group">
    <span class="title" @click="message = ! message" v-if="message">Message</span>
    <input type="text" class="input-text">
    <span class="icon"  @click="icon = ! icon" v-if="icon"></span>
  </div>
</Layout-Layout>
Copy the code
.input-group flex 0 0 75% height 40px border 2px solid red border-radius 4px display flex align-items center > * box-sizing border-box .input-text font-size 20px padding-left 10px height 100% flex 1 outline none border none .icon Flex 0 0 24px height 24px border-radius 50% background-color #648e93 //Copy the code

Reasons explained:

This is also a normal three-column layout, but the key is that the flex: 1 property of.input-text can take up the remaining space and expand accordingly when other accessories are not present.

3. The card

Implementation effect picture:

Source code, online view

<Layout-Layout
  :background-color="bgColor"
  class="flex-card"
>
  <header class="header"></header>
  <article class="article">
    <div class="article__item">1</div>
    <div class="article__item">2</div>
    <div class="article__item">3</div>
    <div class="article__item">4</div>
    <div class="article__item">5</div>
    <div class="article__item">6</div>
  </article>
  <footer class="footer"></footer>
</Layout-Layout>
Copy the code
.flex-card display flex flex-flow column nowrap .header flex-basis 80px background-color #4E51D8 .footer flex-basis 50px  background-color #00B060 .article flex auto background-color #FF9000 display flex flex-flow row wrap align-content center justify-content space-around &__item width 28% height 50px box-shadow 0 2px 4px rgba(255, 255, 255, .4), 3px 0 5px rgba(0, 0, 0, .6)Copy the code

Reasons explained:

Change the main axis to vertical, header and footer to top and bottom, respectively, due to the flex: Auto property of article, to avoid absolute abuse. Using align-content in the middle, as opposed to align-items, makes it possible to treat multiple lines of elements as a whole.

4. The waterfall flow

Physical effects:

The CSS is colored at compile time, so refreshing the page directly is not feasible, only resaving the code for compilation can change the color.

Source code, online view

<Layout-Layout
  :background-color="bgColor"
  class="flex-flow"
>
  <div
    class="flow-column"
    v-for="m in 5"
    :key="m"
  >
    <div
      class="flow-item"
      v-for="n in 8"
      :key="n"
    ></div>
  </div>
</Layout-Layout>
Copy the code
$flow-columns = 5; $flow-items = 8; // function randomColor(min, Max) {return floor(math(0, 'random') * (max-min + 1) + min); } randomPx(min, max) { return floor(math(0, 'random') * (max - min + 1) + min) px; } .flex-flow { display: flex; justify-content: space-between; overflow: hidden; .flow-column { display: flex; flex-direction: column; Flex: 0 0 18.6%; .flow-item { width: 100%; margin: .1rem 0; } } } for column in (1 .. $flow-columns) { .flow-column:nth-child({column}) { for item in (1 .. $flow-items) { .flow-item:nth-child({item}) { flex: 0 0 randomPx(30, 100); background-color: rgb( randomColor(0, 255), randomColor(0, 255), randomColor(0, 255) ); }}}}Copy the code

Reasons explained:

Implementing waterfall flow in Flex is relatively simple. Bonus tip: use punctuation when using the stylus; it took me nearly 20 minutes to find compilation errors.

The last

Merge multiple Commits

We need to merge commit before push:

git log --oneline
git rebase -i xxxxxxx
git log --oneline
git status 
git push
Copy the code

After a brief overview of CSS, the next step is to improve the humble resume…

The resources

  1. VSCode friendly tips
  2. Vuetify