CSS: checkbox+label+selector

introduce

In fact, it was called “Revisiting Flex Layout” in the middle of this article, but it got lost in the middle of it.

I’m not a big trouble maker, really, as you can see from the hero pool of my games: silent the butcher (DOTA2), galen (LOL), Arthur (pesticide).

These three elements are the first of many CSS Tricks not only to be used in the next review of Flex Layout, but because they are so basic.

Key concept: Technique is all about preserving state (emphasis).

The sample

The sample section only contains Gif images and source code addresses, please see the tips section for details (tips are generic).

1. The switch switch

The style mimics Vuetify’s Switches.

Gif preview:

Animation source code, online animation

2. Effect of turning off lights

The switch is realized above, so a simple association is of course to turn on and off the lights.

Gif preview:

Animation source code, online animation

Skills that

In JavaScript, we can use variables, the DOM, to store state, and in CSS, we can use pseudo-class selectors to store state, which is the core of CSS and the essence of the above example implementation.

Getting back to the topic of Flex layout, let’s take a look at the concept of Flex layout. The first element to which Flex elastic layout is declared is called an elastic container, and its children are called elastic items. There are two axes in this elastic container by default, one is called main axis and the other is called cross axis. The entire Flex container has six properties, two of which are described this time: context-content and align-items (to mention that align-content is multi-line).

List the common values for these two attributes (see MDN for more values added) :

.flex {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center;
}
Copy the code

Code reading

The project is rendered via VuePress, so the syntax of Vue is used, but only Vue’s for loop is used here to solve the problem of duplicate DOM writing; The effect reference source.

1. label

The function bar and the display bar are on both sides. First, complete the DOM structure:

The flex__feats field is the left side, and flex__exh is the display field.

<div class="flex"> <section class="flex__feats"> <div class="feat__list"> <h4 class="feat__list_title">justify</h4> <div  class="feat__list_labels"> <label>flex-start</label> <label>flex-end</label> <label>center</label> <label>space-between</label> <label>space-around</label> </div> </div> <div class="feat__list"> <h4 class="feat__list_title">align</h4> <div class="feat__list_labels"> <label>flex-start</label> <label>flex-end</label> <label>center</label> </div> </div> </section> <div class="divider"></div> <section class="flex__exh"></section> </div>Copy the code

The Flex layout is then used to split them up, which I won’t go into because it’s not primarily Flex this time.

<style lang="stylus" scoped>
.flex
  width 100%
  height 100%
  display flex
  *
    box-sizing border-box
  &__feats
    flex-basis 28%
    height 100%
    display flex
    justify-content space-around
    .feat__list
      display flex
      flex-direction column
      justify-content flex-start
      align-items center
    .feat__list_labels
      flex-grow 1
      display flex
      flex-direction column
      justify-content space-around  
      align-items center  

.divider
  width 1px
  height 100%
  margin 0 2px
  background-color #000;
</style>
Copy the code

Note that the DOM structure of the function bar is repetitive, so use Vue to simplify things:

<section class="flex__feats"> <div class="feat__list" v-for="(feat, index) in feats()" :key="index"> <h4 class="feat__list_title">{{feat.title}}</h4> <div class="feat__list_labels"> <label  v-for="(item, index) in feat.list" :key="index">{{item}}</label> </div> </div> </section> <script> export default { data() { return { Ggcolor: "# c0c4C3 ", // Ggpus: () => {return [{title: "jusitify", list: ["flex-start", "flex-end", "center", "space-between", "space-around"]}, {title: "align", list: ["flex-start", "flex-end", "center"]} ] } }; }}; </script>Copy the code

2. checkbox

Then we need a bunch of checkboxes to trigger the state, because DOM parsing is depth-first and CSS does not have a parent selector, although there are ways to hack it, so we need a bunch of checkboxes at the top:

<div class="flex">
  <input type="checkbox" class="toggle" v-for="(checkbox, index) in checkboxs()" :id="checkbox">
</div>
Copy the code

Then you need to hide it:

.toggle[type="checkbox"]
  width 0
  height 0
  filter opacity(0)
  opacity 0
  display none
Copy the code

3. selector

For this to work, we also need to bind the input ID to the label:

<label v-for="(item, index) in feat.list" :key="index" :for="`${feat.title}-${item}`">{{item}}</label>
Copy the code

We then use a selector to get the label and change its color to prove that it is the selected child, for example (full version) :

#jusitify-flex-start:checked ~ .flex__feats .jusitify-flex-start
  padding 4px 4px
  background-color #5a191b/ / LiZicolor #fffef9/ / whiteCopy the code

Test binding:

4. Display it on the right

We’ll start by adding three elements to help us see the effect:

<section class="flex__exh">
  <div class="exh__item" v-for="n in 3" :key="n"></div>
</section>
Copy the code

&__exh
  flex-grow 1
  padding 16px
  .exh__item
    width 15%
    height 15%
    box-shadow 0 0 4px rgba(0, 0, 0, .5)
    &:nth-child(1)
      width 18%
      height 20%
    &:nth-child(2)
      width 14%
      height 18%
    &:nth-child(3)
      width 15%
      height 15%
Copy the code

Then continue to use selector for the final task, example (full version) :

#jusitify-flex-start:checked ~ .flex__exh
  display flex
  justify-content flex-start
Copy the code

And you’re done. Check it out online.

The last

The beauty of CSS is the combination of multiple properties. Remember to have a good relationship with the designer, otherwise you will have all these attributes, the product will still be very ugly…

~~Preview: Relive Flex Layout is on the way.~~

Link: Review Flex Layout

The resources

Vuetify
Color scheme: Chinese color
MDN