Location>code7788 >text

A few tips for using Flex layouts

Popularity:462 ℃/2024-12-13 01:27:42

former circumstances

Flex is an abbreviation for Flexible Box, meaning "flexible layout", used to provide maximum flexibility for the box model, any container can be specified as a Flex layout, if I say that I can not leave the development of the layout of the way that is not Flex, and the program is recommended to use Flex layout, Grid layout support is less than ideal.

In the use of flex layout time and time again, encountered some small trouble, and to solve these small troubles in the process of discovering some tips, special records and share them out.

Tips content

Tip 1: flex-direction for column's child elements to adapt to the content width

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
	    .test {
			  width: 100%;
			  display: flex;
			  flex-direction: column;
			}
			.test-item {
			  height: 100px;
			  display: flex;
			  flex-direction: row;
			  justify-content: center;
			  align-items: center;
			  background-color: red;
			  color: white;
			}
			.test-item:nth-of-type(3){
			  align-self: flex-start;
			}
    </style>
  </head>
  <body>
      <div class="test">
        <div class="test-item">010101</div>
        <div class="test-item">020202</div>
        <div class="test-item">030303</div>
      </div>
  </body>
</html>

When set to flex-direction: column, the item element align-self style value defaults to stretch, resulting in the item element will be full of the entire line, if you want to do the item element adaptive content width you set to align-self:baseline or flex-start can be

The above example can realize the following layout effect:

Experience Links:CSS Playground

Tip 2: Using margin:auto to achieve some special layout

For the following requirement your first thought is how to implement the flex layout method:

According to the normal realization of the idea is that the left side of a div wrapped around the left side of the content, the right side and then a div, and then use justify-content:between can be achieved or let the left side of the div for flex:1, that there is a way to make the structure to play a flat layer, the left side of the wrapped div exempted, that is, margin:auto, the use of good margin:auto can achieve some special layout, the demo code is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	  <style>
	  .test,.test0,.test1 {
			  width: 100%;
			  display: flex;
			  flex-direction: row;
			  background-color: black;
			}
			.test-item,.test-item0,.test-item1 {
			  width: 100px;
			  height: 100px;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  color: white;
			  background-color: green;
			}
			.test-item:nth-last-of-type(1){
			  margin-left: auto;
			}
			.test-item0:nth-last-of-type(2){
			  margin-left: auto;
			}
			.test-item1:nth-of-type(2){
			  margin-left: auto;
			}
			.test-item1:nth-of-type(3){
			  margin-right: auto;
			}
	  </style>
  </head>
  <body>
    <div class="test">
      <div class="test-item">1</div>
      <div class="test-item">2</div>
      <div class="test-item">3</div>
      <div class="test-item">4</div>
    </div>
    <div class="test0">
      <div class="test-item0">1</div>
      <div class="test-item0">2</div>
      <div class="test-item0">3</div>
      <div class="test-item0">4</div>
    </div>
    <div class="test1">
      <div class="test-item1">1</div>
      <div class="test-item1">2</div>
      <div class="test-item1">3</div>
      <div class="test-item1">4</div>
    </div>
  </body>
</html>

The above example can realize the following layout effect:

Experience Links:CSS Playground

Tip 3: Implementing with align-selfIndividual Element Position Control on Cross Axis

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
	    .test {
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			}
			.test-item {
			  width: 100px;
			  height: 100px;
			  display: flex;
			  flex-direction: row;
			  justify-content: center;
			  align-items: center;
			  color: white;
			  background-color: red;
			}
			.test-item:nth-of-type(1){
			  align-self: flex-start;
			}
			.test-item:nth-of-type(3){
			  align-self: flex-end;
			}
    </style>
  </head>
  <body>
    
    <div class="test">
      <div class="test-item">1</div>
      <div class="test-item">2</div>
      <div class="test-item">3</div>
    </div>

  </body>
</html>

Through the align-items can be overall control of the cross-project elements in the fork axis of the alignment, but if you want to control the alignment of it individually, then use a good align-self it, the above example can be achieved as follows layout effect:

Experience Links:CSS Playground

Tip 4: Use gap to set the spacing between items in a container

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	  <style>
		  .wrap {
			  display: flex;
			  flex-direction: row;
			}
			.test {
			  width: 320px;
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  justify-content: space-between;
			  flex-wrap: wrap;
			  margin-right: 20px;
			}
			.test-item {
			  width: 100px;
			  height: 100px;
			  margin-bottom: 10px;
			  flex: none;
			  display: flex;
			  flex-direction: row;
			  justify-content: center;
			  align-items: center;
			  color: white;
			  background-color: red;
			}
			.test0 {
			  width: 320px;
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  flex-wrap: wrap;
			  margin-right: 20px;
			  gap: 10px 10px;
			}
			.test-item0 {
			  width: 100px;
			  height: 100px;
			  flex: none;
			  display: flex;
			  flex-direction: row;
			  justify-content: center;
			  align-items: center;
			  color: white;
			  background-color: red;
			}
	  </style>
  </head>
  <body>
    <div class="wrap">
      <div class="test">
        <div class="test-item">01</div>
        <div class="test-item">02</div>
        <div class="test-item">03</div>
        <div class="test-item">04</div>
        <div class="test-item">05</div>
        <div class="test-item">06</div>
        <div class="test-item">07</div>
        <div class="test-item">08</div>
      </div>

      <div class="test0">
        <div class="test-item0">11</div>
        <div class="test-item0">12</div>
        <div class="test-item0">13</div>
        <div class="test-item0">14</div>
        <div class="test-item0">15</div>
        <div class="test-item0">16</div>
        <div class="test-item0">17</div>
        <div class="test-item0">18</div>
      </div>
    </div>
  </body>
</html>

Flex layout if you do not rely on the gap to achieve the following layout is a bit of a problem on the right, through justify-content: space-between can be done to equalize the remaining space between the elements have spacing, but if you meet the unline elements are not enough when the left image of the following problem, the solution is to manually generate an empty element to make up for the contents of a line! can also be done; another way to achieve is through the margin to achieve the element spacing, and then through the :nth-child () way to remove the margin of the most marginal elements in each line. the above two ways are relatively troublesome, if you use the gap you can easily achieve the effect of the right figure

Experience Address:CSS Playground

Tip 5: Some of the more commonly used abbreviations

flex: 1/flex: 0%; equivalent to flex:1 1 0%; child elements share the parent's space equally, and each child element is the same size

flex: none; equivalent to flex:0 0 auto; the element keeps its original size.

flex: auto; equivalent to flex:1 1 auto; the element size can be flexed up or down, with full flexibility, the item will scale according to its size and remaining space

Note: Difference between flex:1 and flex:auto.

  • The flex-basis attribute defines the main axis space (main size) that the item occupies before allocating the extra space
  • flex:1 is equivalent to flex: 1 1 0%, which means that the base size of the project is 0%, not taking into account the size of the project itself, but only scaling according to the remaining space
  • flex:auto is equivalent to flex: 1 1 auto, which means that the base size of the project is auto, i.e., the size of the project itself, but also scales according to the space left over
  • If the container has enough space, both flex:1 and flex:auto will split the remaining space equally, but flex:auto will maintain the minimum width of the item itself, while flex:1 will not
  • If the container doesn't have enough space, flex:1 will prioritize compressing the content so that all items can share the space equally, while flex:auto will prioritize keeping the content intact and squeezing the space for other items

Online test address:JS Bin - Collaborative JavaScript Debugging

Tip 6: Browser Developer Tools

For newcomers just learning to use flex layout, often easy to forget some of the attributes, in fact, through the browser developer tools to assist in learning flex layout, vs code also has the corresponding plug-ins can be assisted

have expectations

The above is just a personal in the development of some of the Flex layout found in the tips, if you have good tips welcome to also share out, common learning progress. Look forward to your message 👀.