Flex realizes three-column equal layout

    <ul>
      <li>左</li>
      <li>中</li>
      <li>右</li>
    </ul>

Divide the following layout into thirds as shown below:

 

method one:

        Parent and child element widths are set to equal width;

        parent element: display: flex;

        Child element: flex: auto; (ie flex: 1 1 auto;)

Analysis: You can see the setting of width, ul and li are both 600px, but what you actually see is that li divides the width of ul equally. This is because flex: auto is set, which means that if there is remaining space, the project will be equally divided and the remaining space will be enlarged. Items with insufficient space are scaled down in proportion;

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: auto;
      }
    </style>

Method Two:

  Parent and child element widths are set to equal width;

        parent element: display: flex;

        Child element: flex: 1 1 33.33%;

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
        margin-top: 200px;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: 1 1 33.33%;
      }
    </style>

 

The effect is as follows: