How to implement dynamic layout conversion from horizontal to vertical arrangement when the total width of a list item exceeds the threshold using CSS alone?

Pure CSS implement dynamic conversion of list item layout: horizontal to vertical

Many front-end developers face the challenge of how to dynamically adjust the layout direction of the list based on the total width of the list item, for example, when the total width exceeds a certain threshold, switch from horizontal to vertical arrangement. This article will demonstrate how to achieve this effect using CSS only and analyze a specific case.

Suppose we have an unordered list<ul></ul> , including multiple<li> Elements, each<li> The width is not fixed. When all<li> When the total width of an element exceeds 300 pixels, you want the list to be converted from horizontal to vertical. We can easily solve this problem by leveraging CSS's Flexbox layout. The key lies in flex-wrap: wrap; attribute. This property allows elements to wrap automatically when they reach the container boundary, enabling a smooth horizontal to vertical transition.

The following CSS code shows how to implement this dynamic layout transformation:

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* contains the inner margin and border within the total width of the element*/
}

ul {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  max-height: 400px; /* Set the maximum height to prevent content from overflowing*/
  overflow-y: auto; /* Add scroll bar to facilitate viewing of excess parts*/
}

li {
  flex-grow: 1; /* Allow the project to occupy available space*/
  padding: 8px;
}

This code first<ul></ul> The element is set to a Flex container and enable flex-wrap: wrap; property to allow list items to wrap automatically. width: 300px; limits the total width of the list as a threshold. max-height and overflow-y: auto ensure that the scroll bar appears when the content exceeds the set height. flex-grow: 1; make sure each<li> Elements distribute the remaining space evenly within the same line. box-sizing: border-box; applies to all elements to ensure that the inner margin and border do not affect the calculation of the total width of the element.

when<li> When the total width of elements exceeds 300 pixels, they will automatically wrap to the next line, thus achieving vertical arrangement. With this concise CSS code, we implement dynamic layout conversion from horizontal to vertical without any JavaScript code.

The above is the detailed content of How to implement dynamic layout conversion from horizontal to vertical arrangement when the total width of a list item exceeds the threshold using CSS alone?. For more information, please follow other related articles on the PHP Chinese website!