Dear friends! W’s activity is almost over, have you got the draw? Just came again ten even, again crooked, feeling with W to be out of the 😭. This time share a layout tip, in the web page to achieve horizontal layout elements.

This is the crew listing page for Ark of Tomorrow.


Code address: READ MORE+

If you look closely, you’ll see that the element layout falls down from the top, and if you run out of space, you’ll get squeezed into the second column.

The normal layout of elements is left to right, and if there is not enough space, it will be squeezed into the second line.


Let me show you what this looks like.


It’s rarely encountered in normal development, but there are some, such as Bilibili’s menu.


Horizontal layout code implementation

A statement in advance

In addition, puG is used to write HTML. If you do not know how to use puG, please see here:

READ MORE+

First, to achieve the layout

  1. Limit the height of the parent element.
  2. Flex layout.
// html pug

- var n = 1;

ul

 while n <= 21

  li= n++

Copy the code

And then add a little bit of style

// less

html.

body {

 width: 100%;

 height: 100vh;

 background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);

 overflow: auto;

}



ul {

 padding: 0 30px;

 height: 100%;

 display: flex;

 flex-wrap: wrap;

 flex-direction: column;

}



li {

 width: 200px;

 height: 300px;

 margin: 30px;

 border: 1px solid #fff;

 color: #fff;

 background-color: rgba(0, 0, 0, 5);

 display: flex;

 font-size: 40px;

 justify-content: center;

 align-items: center;

}



Copy the code

Code address: READ MORE+

Second, empty element placeholder

In the example above, if you scroll to the end, you’ll see something like this.


The padding-right and margin-right of the parent element and the child element are lost.

So the solution has several kinds, here uses a kind of more practical one, uses blank element to prop up this space.

There are two elements in a column, so just plug in two blank elements.

// html pug

- var n = 1;

ul

 while n <= 21

  li= n++

 li.empty

 li.empty

Copy the code
// less

.empty {

  width: 30px;

  background-color: unset; // Remove the background

  border: none; // Remove the border

  point-event: none; // Remove the trigger event

  animation: unset; // Remove the animation, if any

}

Copy the code

CodePen: READ MORE +

Scroll vertically to scroll horizontally

If you use a trackpad, you can scroll with two fingers comfortably.

But most of the students still use the mouse.

In fact, there is very little horizontal scrolling on the Web, so if you want to do compatibility, you have to do emulation.

I can think of two ways:

  • Simulation of mobile terminal drag (not implemented this time)
  • Mouse vertical axis scroll turn horizontal axis scroll

To scroll horizontally, there are 3 steps:

  1. Listen for mouse wheel events
  2. Determine if it is a vertical roll
  3. To change the scroll elementscrollLeft

The code is simple, just a few lines.

document.body.onmousewheel = (e) = > {

    let step = 50

    if (

e.deltaY ! = =0

      && Math.abs(e.deltaY) > Math.abs(e.deltaX)

    ) {

      document.body.scrollLeft += e.deltaY < 0 ? -step : step

    }

}

Copy the code

Code address: READ MORE+

conclusion

  1. Use Flex for landscape layout.
  2. Use blank elements to support the trailing space.
  3. Listen for mouse wheel events to simulate vertical scroll to horizontal scroll.

Points to note are:

  1. Both parent and child elements need height.
  2. More than one screen will lose the right margin.

The last

Previous articles

“Ark of Tomorrow” check-in effect implementation: READ MORE+

The front interface of Ark of Tomorrow is rewritten: READ MORE+

Effect of the page

CodePen: READ MORE +

Arknight React: READ MORE+