A brief introduction to flex layout, with internal dice layout

Make writing a habit together! This is the sixth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

preface

In real application scenarios, we usually encounter a variety of devices with different sizes and resolutions. In order to properly layout our application interfaces on all these devices, we need responsive interface design to meet such complex layout requirements.

The advantage of the Flex elastic box model is that the developer only needs to declare how the layout should behave, not how it should be implemented. The browser is responsible for the actual layout, and when the layout involves scenarios of variable width, distribution alignment, the elastic box layout should take precedence.

grammar

Flex-direction: adjusts the spindle direction

Row: indicates that the main axis is horizontal to the right. Column: indicates that the main axis is vertically down. Row-reverse: indicates that the main axis is horizontal.Copy the code

Context-content is primarily used for SettingsAlignment of the main axis

Flex-start: the elastic box element will be aligned to the start position. Flex-end: the elastic box element will be aligned to the end position. The elastic box elements will be aligned toward the center of the row. Space-around: The elastic box elements will be evenly distributed across the row.Copy the code

Align-items is used to adjustAlignment of side axes

Flex-start: Elements are aligned at the beginning of the side axis. Flex-end: Elements are aligned at the end of the side axis. Center: The element is centered and aligned on the side axis. Stretch: The height of the element will be stretched to the maximum (stretch only when no height is given).Copy the code

The flex-wrap property controls whether a Flex container has one or more lines, with no line breaks by default

Nowrap: No line breaks (default), compressing the width of the subbox if the width overflows. Wrap: Line wrap is used when width is insufficient.Copy the code

Align-content sets the arrangement of multi-line Flex containers

Flex-start: stack the rows to the starting position of the side axis. Flex-end: Stack each line toward the end of the elastic box container. Center: Stack each row in the middle of an elastic box container. Space-around: The rows are evenly distributed on the side axis. Space-between: The first line is attached to the top, the last line is attached to the bottom, and other lines are evenly distributed in the elastic box container. Stretch: when the height is not set.Copy the code

Small Demo

Flex in shaft

    <ul class="box">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
    </ul>
Copy the code

<style> /* *{ margin:0; padding:0; } */ .box{ width:500px; height:500px; margin:20px auto; background:pink; display: flex; / /* flex direction: row; / / flex direction: row; / / flex direction: row; */ * flex-direction: column; */ /* flex-direction: column-reverse; */ align-items: center; justify-content: space-between; } li { list-style: none; width: 100px; height: 100px; background-color: skyblue; } </style>Copy the code

Flex newline

 <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
    </ul>
Copy the code

<style> *{ margin:0; padding:0; } .box{ width:500px; height:500px; margin:20px auto; background:pink; display: flex; /* flex-wrap: nowrap; / / flex-wrap: nowrap; */ * flex-wrap: wrap; } li {/* < span style = "box-sizing: border-box! Important; width: 100px; height: 100px; background-color: skyblue; } </style>Copy the code

Flex side axis alignment

    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
        <li>8</li>
    </ul>
Copy the code

<style> *{ margin:0; padding:0; } .box{ width:500px; height:500px; margin:20px auto; background:pink; display: flex; flex-wrap: wrap; flex-direction:column; */ /* Whether or not it is valid, can not mix ！！！！ */ * align-items: center; align-items: flex-start; align-items: flex-end; align-items: stretch; */ * align-content: center; */ /* align-content: flex-start; */ /* align-content: flex-end; */ * align-content: space-between; */ * align-content: space-around; */ /* every element will finally have exactly the same gap between them */ * align-content: space-instituted; */ } li { list-style: none; width: 100px; height: 100px; background-color: skyblue; } </style>Copy the code

The application of flex: 1

</li> <li> </li> </li> </li>Copy the code

<style> *{ padding: 0; margin: 0; } li{ /* width: 200px; */ height: 200px; list-style: none; background-color: skyblue; } ul {/* enable elastic layout */ display: flex; width: 1000px; height: 200px; margin: 100px auto; background-color: pink; } li { flex: 1; display: flex; justify-content: center; align-items: center; } li:nth-child(2){ flex: 2; background-color: teal; } li:nth-child(3){ flex: 3; background-color: tomato; } </style>Copy the code

Use flex dice

    <div class="table">
      <div class="touzi t1">
          <span></span>
      </div>
      <div class="touzi t2">
          <span></span>
          <span></span>
      </div>
      <div class="touzi t3">
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t4">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t5">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="touzi t6">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
  </div>
Copy the code

    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      .table {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 600px;
          height: 600px;
          margin: 100px auto;
          background-color: teal;
      }
      
      .touzi {
          display: flex;
          width: 80px;
          height: 80px;
          background-color: whitesmoke;
          border-radius: 15px;
          padding: 10px;
      }
      
      .t1 span {
          background-color: red;
      }
      
      .t1 {
          justify-content: center;
          align-items: center;
      }
      
      span {
          display: block;
          width: 18px;
          height: 18px;
          background-color: black;
          border-radius: 50%;
      }
      
      .t2 {
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
      }
      
      .t3 {
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
      }
      
      .t3 span:nth-child(1) {
          align-self: flex-start;
      }
      
      .t3 span:last-child {
          align-self: flex-end;
      }
      
      .t4 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
      }
      
      .t4 span {
          margin: 5px;
      }
      
      .t5 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
      }
      
      .t6 {
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
          flex-direction: column;
      }
      
      .t5 span:nth-child(3) {
          margin: 0 21px;
      }
  </style>
Copy the code